Two Column Layout And Vertical Menu Tutorial
Create HTML5 and CSS Files
Section 1 Lesson 1
Two Column Layout And Vertical Menu Tutorial
Create HTML5 and CSS Files
Section 1 Lesson 1
You create the starting HTML and CSS files in this lesson.
Viewing the page at this juncture will appear blank. However you can view the page source in the web browser to assure you have the correct html tags. You also can look at the web page using the Element View in your web browser’s inspection tools.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
Inspecting the Rendered HTML
Most web browser’s inspection tools can be activated with a right mouse click over the content. The short-cut menu usually has a choice labeled Inspect Element. As well web browsers have an menu bar choice that is usually labeled Web Developer or something similar. In all cases you end up with a view that allows you to inspect the source files retreived from your web server and how the web browser interpreted the source to generate the HTML elements.
The next image shows using Chrome to view the completed lesson files. It shows that there is nothing visible on our web page. The web browser inspection tools are opened. The interpretation of the HTML is shown by selection the Elements tab in this version. The source of each file shown by selecting the Sources tab and then the file of interest.
Completed Lesson with Elements Inspector
Step 1: Create HTML file.
Create the index.html file in your practice folder. Include the following HTML, then save.
This is the completed index.html file.
The <meta charset="UTF-8" /> line helps the web browser interpret the content if character codes are used that are not considered the standard set you are familiar seeing such as letter of the alphabet, digit, punctuation symbols and some character graphics such as a line drawing characters. These character codes are consider the standard ASCII (American Standard for Character Information Interchange).
ASCII is a limiting set so the Unicode character set was created. It includes the ASCII codes. We also call the Unicode character set the extended codes.
A full discussion on character coding beyond the scope of this tutorial other that to point out that including <meta charset="UTF-8" /> is a best practice for English character based HTML markup.
Step 2: Create style sheet file.
Create the site.css file in your practice folder. Include the following CSS, then save.
This is the completed site.css file.
There will be no CSS at this point in the tutorial.
The @charset "UTF-8"; line tells the browser to read the CSS file as UTF-8 which supports the use of Unicode characters in the CSS file. We do not plan to use Unicode characters in this tutorial, but it is a common practice to include it.
Step 3: Link external style sheet.
In your practice folder’s index.html file insert line 5, then save.
Step 4: Replace title element.
In your practice folder’s index.html file replace line 6, then save.
It is a best practice to have a meaningful document title for every web page. The web brower uses this for history, bookmarks, title bars, tabs and sharing the file.
Step 5: Inspect in Web Browser.
Open your own copy of the index.html file in your web browser.
The page should appear blank however you still should verify that both the index.html and site.css files were loaded.
You can do that by using the source view in your web browser developer tools. Then you should also use the elements inspection tool to verify the correct HTML was rendered.
This example may contain variations
necessary for loading from our server.