MMDT1021 Chapter 3 Notes

MMDT1021 Chapter 3 Notes - page 2

Doctypes

Doctypes was covered in Chapter 1 Notes - page 2. Review the notes on doctypes again.

Title head, and body structure

Title head, and body was covered earlier in Chapter 2 Notes - page 2 so that Lab2 could be completed. Review these notes again.

The HTML 5 way of starting your document

HTML 5 does things a bit differently. The code below is a basic template for HTML 5 compliant code. The doctype is simple now. The language type has been added to the html opening tag. Character encoding information has been added as a meta tag in the head.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>My Title</title>
</head>
<body>
Body material here.
</body>
</html>

Section Headers

Headers are used to section your page to give your page some structure.

Code	Result
`<h1>Header size 1</h1>`	Header size 1
`<h2>Header size 2</h2>`	Header size 2
`<h3>Header size 3</h3>`	Header size 3
`<h4>Header size 4</h4>`	Header size 4
`<h5>Header size 5</h5>`	Header size 5
`<h6>Header size 6</h6>`	Header size 6

Paragraphs and Paragraph Alignment

This is presented again to reinforce the concept of using alignment. XHTML requires the tag, whereas in HTML the closing tag was optional. I would recommend to always use the tag.

Code	Page
The old way: <p> Demo paragraph text. Demo paragraph text.</p> <p align="center"> Demo paragraph text. Demo paragraph text.</p> <p align="justify"> Demo paragraph text. Demo paragraph text.</p> <p align="left"> Demo paragraph text. Demo paragraph text.</p> <p align="right"> Demo paragraph text. Demo paragraph text.</p> The new HTML5 way: <p style="text-align: center;">Aligns text to the center.</p> <p style="text-align: justify;">Justifies text.</p> <p style="text-align: left;">Normal left alignment. No need to specify.</p> <p style="text-align: right;">Aligns text to the right.</p>	Result Source

Code

Page

The old way: