Embedded Files
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> <h1> <table>
Closing Tag </body> </h1> </table>
Between the tags we insert our actual content that we wont to display on the . 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 BASE TEMPLATE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<title>My First Web Page</title>
</head>
<body>
<!-- Start body content -->
<!-- Script File -->
<script src ="script.js"></script>
</body>
</html>
<!DOCTYPE html> </html>
<!DOCTYPE html> </html>
Tells the Computer that the file it is opening is an HTML File. You begin and end your document with these two tags.
<!DOCTYPE html>
<html>
<!-- Start body content -->
</html>
<head> </head>
<head> </head>
This holds set up information about the webpage like title, CSS links and other settings that are not displayed on the web page visually. This is placed inside the HTML tags.
<!DOCTYPE html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
</html>
<title> </title>
<title> </title>
This tag is embedded withing the head tag and displays the title of page in the browser tab bar.
<title>This is my first website </title>
<body> </body>
<body> </body>
Any content between the open and close body tag will display on the elements on the page. Anything outside the tags will not display. Only one body tag per document.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
</body>
</html>
Headers: <h1><h2><h3>..<h6>
Headers: <h1><h2><h3>..<h6>
This is a header tag used for titles and subtitles on a page (bold and title text). They emphasise text. There are other tags that can be used by just changing the number. i.e. h2, h3... h6 These go inside the body tag only.
<h1> Title of website</h1>
<h2> Subtitle of topic</h2>
Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Page Title</h1>
<h2>Subtitle</h2>
</body>
</html>
Paragraphs: <p> </p>
Paragraphs: <p> </p>
Paragraph tag where contents is styled. This should be used for big paragraphs of information
<p> This is my first paragraph content text</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Page Title</h1>
<h2>Subtitle</h2>
<p> In this paragraph is the main content</p>
</body>
</html>
Comment Tags <!-- --!>
Comment Tags <!-- --!>
Comment tag. Used to add comments to the code but will not be displayed on the web page. You wont see them.
<!-- This a comment about the following code --!>
Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- This is the start of the web page -->
<h1>Page Title</h1>
<h2>Subtitle</h2>
<p> In this paragraph is the main content</p>
<!-- This is the end of the web page -->
</body>
</html>
Lists - Dot Points and Numbers: <ul><ol><li>
Lists - Dot Points and Numbers: <ul><ol><li>
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>
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- This is the start of the web page -->
<h1>Page Title</h1>
<h2>Subtitle</h2>
<p> In this paragraph is the main content</p>
<!-- Example of a unordered list of dot points -->
<ul>
<li> dot point - Unordered item 1</li>
<li> dot point - Unordered item 1</li>
</ul>
<!-- Example of a ordered list with numbers -->
<ol>
<li> Numbered list item 1</li>
<li> Numbered list item 2</li>
</ol>
<!-- This is the end of the web page -->
</body>
</html>
Adding an Image: <img>
Adding an Image: <img>
The following code inserts an image into the page.
Its really important that the image is located in the root folder OR a folder called 'images' (preferable) and the filepath and filenames are spelt accurately, 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;">
Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- This is the start of the web page -->
<h1>Page Title</h1>
<h2>Subtitle</h2>
<p> In this paragraph is the main content</p>
<!-- Example of a unordered list of dot points -->
<ul>
<li> dot point - Unordered item 1</li>
<li> dot point - Unordered item 1</li>
</ul>
<!-- Example of a ordered list with numbers -->
<ol>
<li> Numbered list item 1</li>
<li> Numbered list item 2</li>
</ol>
<!-- This is an image. The actual file image is saved in in the same folder as the HTML -->
<img src="images/binary_image.jpg" style="width:204px;height:128px;">
<!-- This is the end of the web page -->
</body>
</html>
Adding a Hyperlink
Adding a Hyperlink
Hyperlinks are used to link to other pages. We locate another html page by using its file path.
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.html">This is a link to page 1</a>
Tables
Tables
<table>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
Tables are made up of rows cand columns. As the table is rendered each row is printed column by column from left to right.
<table> indicates the start if the table.
The <tr> indicates the start of a new row. </tr> end of a row
For each cell in the column we use either a <th> table header which will place the text in bold or we <td> which indicates table data. We wrap each cell with these tags
</table > completes the table.
Tips
Tips
Nesting Tags
Nesting Tags
When coding your page, its really important that when using multiple tags together, that your tags are nested together, otherwise your page will not display as planned.
Good Example - An example includes when using a list. See how stylising text is only around the content inside the list item
<ul>
<li><i>My Data</i></li>
</ul>
Poor Example - In the example below the tags are placed in the wrong order, this will result in the browser rendering the page incorrectly.
<ul>
<li><i>My Data</li></i>
</ul>
Report abuse