HTML
Some HTML History
1990-1995 HTML developed at CERN (Center for European Nuclear Research) and later at IETF (Internet Engineering Task Force)
1997 HTML 3.2 and HTML 4.01 developed
2014 HTML5 recommendation
Dec 2017 HTML 5.2 recommendation
2018 HTML 5.3 in development
Further reading:
Wireframe to HTML
Sample Wireframe
Rendered HTML
Based on the wireframe to the left
The next stage would be to decide on the structure of the web pages themselves.
Structure of a Page
In National 5 you could have created a structure similar to the one shown on the left.
Using 3 Div tags to assist in creating the structure of the page.
The ID attribute
<div id = "top">
<h1>Company Name</h1>
</div>
<div id = "middle">
<h2>About Us</h2>
<p>Content Text here</p>
</div>
<div id = "bottom">
<h2>Best Seller</h2>
<p>Built </p>
<img src="firstStage.jpg">
...
</div>
HTML Code
We have used 3 individual ID attribute's so that we can select each DIV tag individually
#top{
background-color: darkred;
}
#middle{
background-color: pink;
}
#bottom{
background-color: pink;
}
CSS Code
The ID selectors are denoted by the use of a # symbol. If we only styled the div tags themselves then all divs would adopt the same appearance.
Code Explanation
We have had to use the id attribute inside the DIV tags
<div id = "top">
<h1>Company Name</h1>
</div>
To ensure that our CSS selector only targets a specific instance of a DIV element and does not style every div element we create a CSS ID
#top{
background-color: darkred;
}
ID’s can act as anchors within a page too. We have discussed how ID’s are more specific than classes but if we have an ID called Contact Us such as below:
<div id = “ContactUs”>
We can use an URL of http://yourwebsitedomain.com#contactus as a hyperlink.
<a href = http://yourwebsitedomain.com#contactus > Contact Us </a>
It will automatically scroll the page down to the point in the page where the element with an ID of contactus.