Wondering how to create a basic web page with HTML and CSS? Lots of people, like yourself, want to make their own website and if all you need is a simple web page with some text and colors then it’s relatively easy to do. Making your own website can be as simple as you want.
Basic Web Page Example
Take a look at this code – it’s about as basic as you can get while using both HTML and CSS. It’s going to display a white page with black text and a red header. You could copy this code into a new text file, save it on your computer as website.html, and open it in your web browser to see the results.
<!doctype html>
<html>
<head>
<title>Your Website's Title for Tabs and Search Engines</title>
<style type="text/css" rel="stylesheet">
body {
background-color: white;
color: black;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Your Web Page's On Screen Title</h1>
<p>This is a paragraph tag. You can wrap text in paragraph tags to create written-structure.</p>
</body>
</html>
Let’s go over the code a little more, so you can understand what everything is doing.
doctype
<!doctype html> tells the browser what doctype you’re using. Specifying html lets the browser know it’s dealing with an HTML page. There are other doctypes available, but 99% of the time when you’re building a website this is the one you’re going to use for web pages. It’s special because unlike most other HTML tags it doesn’t require a closing tag (i.e. there is no </doctype> needed.
html
After declaring the doctype as HTML you need to wrap the rest of the page in a set of <html></html> tags. This pair of tags is for page structure, but the html tag can also be styled with CSS – all HTML tags can be styled with CSS and this is no exception.
head
<head></head> is where stuff goes that helps the browser set up the page. Nothing inside the head tags shows up on-screen. You can use the head area to specify META tags, page titles, viewport settings, favicon settings, and loading of scripts, fonts, and stylesheets.
CSS Styles
CSS (cascading stylesheets) give you complete control over how elements of your website look. In this example, CSS styles are inline inside the head using a <style></style> tag. We’ve also added two attributes to the style tag to let the browser know it’s dealing with a stylesheet that’s formatted as text/css. All together, the tag looks like <style type="text/css" rel="stylesheet">. Inside the styles tag are the styles. This block of code, as with most code blocks, is finished with a closing tag </style>. The closing tag tells the browser it has reached the end of this stylesheet.
There are at least three ways to load CSS styles to an HTML page.
Again, this example is extremely simple. But, it’s also enough to give you an idea of CSS syntax and how CSS properties and values are written. The basic format is always element { property: value; }
As you can see, we’re styling two different elements — the body and the h1.
You might also notice there’s a <p></p> (for paragraph) code block in the example that we did not declare a style for. This is because basic text properties can be inherited rather than duplicating style declarations. In this case, the paragraph text will inherit its black color from the color: black; style within the body { } CSS. Of course, to be explicit and intentional you could add a redundant p { color: black; } style too, but it is not necessary. Too much redundancy causes code bloat and can undesirably slow down a website – even a simple HTML page like this.
body
The body comes after the head. It’s another HTML tag that requires a closing tag – notice there’s a </body> toward the end. It’s typically the last tag before the closing </html>.
The body is often the first element of a web page that gets styled. For more advanced styling techniques, you can add classes and an ID to the body to make it unique and/or reference it inside stylesheets in different ways (i.e. you could do <body id="site-body" class="the-body"> and then change the stylesheet declaration from body { } to either #site-body { } or .the-body { }.
All three style declarations would reference and style the same body tag, but make sure if you choose to use an ID attribute that the ID name is unique to the page CSS ID’s are individual elements and should only occur once per page, whereas, CSS class names can be reused over and over as many times as needed.
h1 Header
<h1></h1> specifies an h1 Header.
The HTML5 spec says you can have an h1 header for each unique section of the site. Although the spec is literally talking about
elements, it’s generally a good rule of thumb to limit h1 headers to one per page. H1’s are usually the page’s on-screen title and should offer a descriptive summary of the main purpose of the page, so search engines can quickly and identify what a page is about.
Web browsers have built-in styles for header tags. By default, they’ll show up bold and with larger text. You can leave that as is, or you can go wild in your stylesheet and change everything to do with them. In ours, we changed the color to red using h1 { color: red; }
p (paragraph)
<p></p> tags denote a paragraph of text.
Again, these come with default styles from the browser, but are also completely stylable. All of the text you write inside of p tags is going to look like paragraph text (or how you styled it using CSS).
Paragraphs are another tag that requires both opening <p> and a closing </p> tags. Forgetting a closing tag will often result in a web page that looks broken because the browser thinks everything following the opening tag is still inside that HTML element..
Hooray! You Can Build a Static Web Page
That’s all you need to create a simple website page using plain HTML and CSS. Amazing, right?
Of course, websites can become really complex and you can do a lot more than this, but this is enough to get you started and display a bit of styled text on screen if that’s all you need. In the biz, we call this a static web page. There’s no server-side processing to build data before the page loads and there’s nothing being dynamically loaded after the page loads it’s static. Visit the WC3 website a list of all the available HTML tags you can use in your code.
0 Comments