Embedded Files
https://www.w3schools.com/html/default.asp
HTML BASE TEMPLATE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> ...</body>
</html>
Web pages are made up of tags which are the words with arrows on either side of them. All tags have a opening and closing tag. Opening tags include two arrows while a closing tag includes a forward slash before the start of the work like below.
Opening Tag - <body>
Closing Tag </body>
Between the tags we insert our content. Words, text, images etc.
Each tag tells the computer what type of data it is and how and where to display it on the screen. There are hundreds of tags. Lets look at some examples below.
<html>
<html>
Tells the Computer that the file it is opening is an HTML File.
<head>
<head>
This holds information about the webpage like title, CSS settings and other settings that are not displayed on the web page visually. This can include scripts for Javascript using a script tag.
<title>
<title>
This tag is embedded withing the head tag and displays the title of page in the browser title bar.
<title>This is my first website </title>
<body>
<body>
Any content between the open and close body tag will display on the page. Anything outside the tags will not display as you would you think.
<body>
</body>
<!-- --!>
<!-- --!>
Comment tag. Used to add comments to the code but will not be displayed on the web page.
<!-- This a comment about the following code --!>
HTML Elements
HTML Elements
<h1>
<h1>
This is a header tag used for titles and subtitles on a page. They emphasise text. There are other tags that can be used by just changing the number. i.e. h2, h3
<h1> Title of website</h1>
<h2> Subtitle of topic</h2>
<p>
<p>
Paragraph tag where contents is styled. This should be used for big paragraphs of information
<p> This is my first paragraph</p>
Adding Lists
Adding Lists
Ordered Lists - display numbers and letters.
<ol>
<li> test 1</li>
<li> test 2</li>
</ol>
Unordered Lists - display dot points or arrows
<ul>
<li> test 1</li>
<li> test 2</li>
</ul>
Adding an Image
Adding an Image
The following code inserts an image into the page. Its really important that the image is located in the root folder and spelt exactly the same as the file name, otherwise the image will not appear. We can also determine the size of the image by accessing it properties. We measure images in pixels (px). Using the style attribute we can set the height and width. By default the image will display at its normal size. Be careful not to stretch the image.
<img src="images/binary_image.jpg" style="width:204px;height:128px;">
Adding a Hyperlink
Adding a Hyperlink
Hyperlinks are used to link to other pages.
Note: Its really important that you use the correct spelling of page files or other websites, otherwise the link will not work.
<a href="page_1.htm">This is a link to page 1</a>
Adding a Table
Adding a Table
Tables can be used to organise a large set of information. The table is broken down into the following layers:
Table <table>
Table Rows <tr>
Table Headers<th>
Table Data <td>
Each table is started with the <table> tag
Each row is started and ended with a <tr> tag
Data is surrounded by the <td> tag
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Div Tags
Div Tags
The <div> element is often used as a container for other HTML elements. Its like splitting your page into different sections
The <div> element has no required attributes, but style, class and id are common and can be used to reference each section.
When used together with CSS, the <div> element can be used to style blocks of content:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
You can div tags an ID that can be referenced by the external CSS file
<div id="navigation">
<ul>
<li><a href="index.html" title="Go Home">Home</a></li>
<li><a href="about.html" title="Learn more about us">About</a></li>
<li><a href="contact.html" title="Contact us">Contact</a></li>
</ul>
</div>
Report abuse