Scribd
Upload
9 views

HTML - Part 1

Uploaded by

sonicmaster553
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML - Part 1

Uploaded by

sonicmaster553
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Presentation 01

HTML Document Markup


01. HTML Document Anatomy
Agenda
Week 1st Week
Day
Duration 4hrs

TIME TOPIC & ACTIVITY COMPLETED-


30 Mins Introduction to HTML Yes/No
60 Mins Anatomy of an HTML Yes/No
document
15 Mins Break Yes/No
60 Mins Document Header Yes/No
30 Mins Q&A Session on lesson learnt Yes/No
15 Mins Break Yes/No
45 Mins Teacher Demonstration on CSS Yes/No
styling
15 Mins Group Discussion Yes/No
Learning Objectives

1. Create a simple HTML document


2. Understand the role of HTML
3. Understand the HTML skeleton
4. Understand the HTML syntax (tags, attributes, comments)
5. Understand the HTML head
6. Understand meta tags
7. Understand character encoding
Introduction

HTML (HyperText Markup Language) is a markup language that tells


web browsers how to structure and display web pages. The current
version is 5.0, which was released in 2012.

The HTML syntax is defined by the World Wide Web Consortium


(W3C). https://www.w3.org/TR/html5-diff/

HTML is a fundamental skill in web development, as it defines the


structure and a good deal of the appearance of a website.
Anatomy of an HTML Doc
1. Start by adding the HTML5 DOCTYPE
declaration:
<!DOCTYPE html>
<html>
2. Add HTML root element by adding an
<head>
<title>My HTML Page</title> <html> start tag at the very beginning
<!-- This is the Document Header and an </html> end tag at the end of the
--> text.
</head>
<body>
<!-- This is the Document Body →
3. Next, create the document head that
</body> contains the title for the page. Insert
</html> <head> and </head> tags before the
content. Within the head element, add
information about the character
encoding <meta charset="utf-8">, and
the page title

4. Finally, define the body of the document


by wrapping the content in <body> and
</body> tags
HTML Tags
● HTML uses elements and tags to describe and format content.
Tags consist of angle brackets around a tag name,

Example of a tag <title> ,


the full element <title>Some page title</title>

● The tag name is not case-sensitive, although the World Wide Web
Consortium (W3C) recommends using lowercase letters in current
versions of HTML.

● HTML tags are used to build HTML elements.

● The tag <title> is an example of an opening tag of an HTML element


that defines the title of an HTML document.

● Not all HTML elements need to be closed; in such cases, we speak of


empty elements, self-closing elements, or void elements.
Anatomy: Skeleton tags

● <html>, <head>, <body> and <title> tags provides the basic structure of
and HTML Doc.

● Web browser understands that it reads a web page by detecting those


tags.

● HTML Docs are well structured documents. <html> tags is the root of
the document and <head> and <body> are branches (nested in <htmL>
tags). This creates a “tree” like structure to hold the content.

● The <!DOCTYPE> declaration at the very top if the doc is not a HTML
tag, but an instruction to the browser about the HTML version used.
Anatomy: HTML Comments

● Use of inline comments in code is a good programming practice.

● To insert comments in HTML, <!-- some content here --> is used.

● Between the comment tags you can insert multiple lines.


Anatomy: HTML Attributes

Tags may include one or more attributes to specify details of the HTML
element.

Attributes must always be set on the opening tags.

Core attributes: title, id, style, class and lang available for any HTML
element

Specific attributes: specific elements describe element specific features


Break Time - 15 Mins
Document Header
The document header defines meta information regarding the page and is
described by the <head> element. By default, the information within the
document header is not rendered by the web browser

Title
The document title is specified using the <title> element.

● Browser Tab/Title Bar: The title appears in the tab or title bar of the browser
window, providing a concise label for the page.
● Search Engine Results Pages (SERPs): When your page shows up in search results,
the title tag is often used as the clickable headline.
● Browser Bookmarks/Favorites: If a user bookmarks your page, the title tag is
typically used as the bookmark's name.
Anatomy: Metadata
● <meta> elements found in <head> are used to describe the content of an HTML
document
● name, http-equiv, content and charset attributes are used in <meta> tags.
● <meta http-equiv="refresh" content="30"> auto reload the page every 30
seconds
● <meta http-equiv="refresh" content="30; url=http://google.com"> redirects
the page to google.com
● <meta charset="utf-8"> specifies documents character encoding (Latin
alphabet ISO-8859-1)
● Meta tags can be used to set cookies to track site visitors
● Take control over the viewport (visible area of the screen) (Responsive web
design etc.)
Q&A Session
Questions

01. For each of the following tags, indicate the corresponding closing tag:
<body> , <head>, <html>, <meta>, <title>

02. What is the difference between a tag and an element? Use this entry
as a reference
<title>HTML Page Title</title>

03. What are the tags between which a comment should be placed?

04. Explain what an attribute is and provide some examples for the <meta>
tag.

13
Break – 15 Mins

14
Teacher Demonstration – 45 Mins

15
Group Discussion
01. Create a simple HTML version 5 document with the title My first HTML document
and only one paragraph in the body, containing the text Hello World. Use the
paragraph tag <p> in the body

02. Add the author (Kevin Author) and description (This is my first HTML page.) of the
HTML document.
03. Add the following keywords related to the HTML document: HTML, Example, Test,
and Metadata.
04. Add the element <meta charset=”ISO-8859-1”> to the document header and
change the Hello World text to Japanese (こんにちは世界). What happens? How can
you solve the problem?
05. After changing the paragraph text back to Hello World, redirect the HTML page to
https://www.google.com after 30 seconds and add a comment explaining this in
the document header.

16
Learning Objectives

● Create a simple HTML document

● Understand the role of HTML

● Understand the HTML skeleton

● Understand the HTML syntax (tags, attributes, comments)

● Understand the HTML head

● Understand meta tags

● Understand character encoding


● Thank you/Any questions/Don’t
forget to leave feedback

18

You might also like