Scribd
Upload
23 views

Module 02 Intro HTML

The document provides an introduction to HTML and covers HTML anatomy, tags, elements, attributes, nesting elements, empty elements, headings from H1 to H6, paragraphs, horizontal rules, and line breaks. It aims to teach students the basics of HTML structure and syntax.

Uploaded by

lgroup985
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Module 02 Intro HTML

The document provides an introduction to HTML and covers HTML anatomy, tags, elements, attributes, nesting elements, empty elements, headings from H1 to H6, paragraphs, horizontal rules, and line breaks. It aims to teach students the basics of HTML structure and syntax.

Uploaded by

lgroup985
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in WD101 Web Development Module No.1

STUDY GUIDE FOR MODULE NO. 2

Introduction to HTML5
MODULE OVERVIEW

Hypertext Markup Language (HTML) is the code that you use to structure your web content and
give it meaning and purpose. For example, is my content a set of paragraphs or a list of bullet
points? Do I have images inserted on my page? Do I have a data table? Without overwhelming,
this module provides enough information to make you familiar with HTML.

MODULE LEARNING OBJECTIVES

At the end of this module, students are expected to:

1. Learn the anatomy of HTML syntax and document to structure your websites.
2. Learn how to insert heading levels within a web page.
3. Learn how to use different formatting.
4. Learn how to insert ordered and unordered lists within a web page.
5. Learn how to insert a graphic within a web page.
6. Learn how to create a link within a web page.

LEARNING CONTENTS (Introduction to HTML5)

2.0 Introduction to HTML

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Anatomy of an HTML Document

 <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time,


when HTML was young (around 1991/92), doctypes were meant to act as links to
a set of rules that the HTML page had to follow to be considered good HTML,
which could mean automatic error checking and other useful things. However,
these days, they don't do much and are basically just needed to make sure your
document behaves correctly. That's all you need to know for now.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 <html></html> — the <html> element. This element wraps all the content on
the entire page and is sometimes known as the root element.
 <head></head> — the <head> element. This element acts as a container for
all the stuff you want to include on the HTML page that isn't the content you are
showing to your page's viewers. This includes things like keywords and a page
description that you want to appear in search results, CSS to style our content,
character set declarations, and more.
 <meta charset="utf-8"> — This element sets the character set your document
should use to UTF-8 which includes most characters from the vast majority of
written languages. Essentially, it can now handle any textual content you might
put on it. There is no reason not to set this and it can help avoid some problems
later on.
 <title></title> — the <title> element. This sets the title of your page, which is
the title that appears in the browser tab the page is loaded in. It is also used to
describe the page when you bookmark/favorite it.
 <body></body> — the <body> element. This contains all the content that you
want to show to web users when they visit your page, whether that's text,
images, videos, games, playable audio tracks, or whatever else.

2.1 Anatomy of an HTML Tag

The main parts of our element are as follows:


1. The opening tag: This consists of the name of the element (in this case, p),
wrapped in opening and closing angle brackets. This states where the element begins
or starts to take effect — in this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a
forward slash before the element name. This states where the element ends — in this
case where the paragraph ends. Failing to add a closing tag is one of the standard
beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together
comprise the element.

Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don't want to appear in the
actual content. Here, class is the attribute name and editor-note is the attribute value. The
class attribute allows you to give the element a non-unique identifier that can be used to target
it (and any other elements with the same class value) with style information and other things.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

An attribute should always have the following:

1. A space between it and the element name (or the previous attribute, if the element
already has one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters “ ' `
= < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it
makes the code more consistent and understandable.

Nesting Elements

You can put elements inside other elements too — this is called nesting. If we wanted to state
that our cat is very grumpy, we could wrap the word "very" in <strong> element, which means
that the word is to be strongly emphasized:

You do however need to make sure that your elements are properly nested. In the example
above, we opened the <p> element first, then the <strong> element; therefore, we have to
close the <strong> element first, then the <p> element. The following is incorrect:

The elements have to open and close correctly so that they are clearly inside or outside one
another. If they overlap as shown above, then your web browser will try to make the best guess
at what you were trying to say, which can lead to unexpected results. So don't do it!

Empty Elements

Some elements have no content and are called empty elements. Take the <img> element that
we already have in our HTML page:

This contains two attributes, but there is no closing </img> tag and no inner content. This is
because an image element doesn't wrap content to affect it. Its purpose is to embed an image in
the HTML page in the place it appears.

2.2 HTML Headings

Heading elements allow you to specify that certain parts of your content are headings — or
subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an
HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you'll
commonly only use 3 to 4 at most:

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to
make text bigger or bold, because they are used for accessibility and other reasons such as
SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

2.3 HTML Paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and
browsers automatically add some white space (a margin) before and after a paragraph.

HTML Display

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows
will create different results. With HTML, you cannot change the display by adding extra spaces
or extra lines in your HTML code. The browser will automatically remove any extra spaces and
lines when the page is displayed:

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page and is most often displayed as a
horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML
page:

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Note: The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line)
without starting a new paragraph:

Note: The <br> tag is an empty tag, which means that it has no end tag.

2.4 HTML Formatting

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

The HTML <b> element defines bold text, without any extra importance.

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside
is typically displayed in italic. The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

HTML <small> Element

The HTML <small> element defines smaller text:

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW [1]:

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

2.5 HTML Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists
always consists of at least 2 elements. The most common list types are ordered and unordered
lists:

1. Unordered lists are for lists where the order of the items doesn't matter, such as a
shopping list. These are wrapped in a <ul> element.
2. Ordered lists are for lists where the order of the items does matter, such as a recipe.
These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

We could modify the markup to this

Try adding an ordered or unordered list to your example page.

2.6 HTML Images

Let's turn our attention to the <img> element again:

As we said before, it embeds an image into our page in the position it appears. It does this via
the src (source) attribute, which contains the path to our image file.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive
text for users who cannot see the image, possibly because of the following reasons:

1. They are visually impaired. Users with significant visual impairments often use tools
called screen readers to read out the alt text to them.
2. Something has gone wrong causing the image not to display. For example, try
deliberately changing the path inside your src attribute to make it incorrect. If you save
and reload the page, you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader
with enough information to have a good idea of what the image conveys. In this example, our
current text of "My test image" is no good at all. A much better alternative for our Firefox logo
would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

2.6 HTML Links

Links are very important — they are what makes the web a web! To add a link, we need to use
a simple element — <a> — "a" being the short form for "anchor". To make text within your
paragraph into a link, follow these steps:

1. Choose some text. We chose the text "Mozilla Manifesto".


2. Wrap the text in an <a> element, as shown below:

3. Give the <a> element an href attribute, as shown below:

4. Fill in the value of this attribute with the web address that you want the link to link to:

You might get unexpected results if you omit the https:// or http:// part, called the protocol, at
the beginning of the web address. After making a link, click it to make sure it is sending you
where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are
having trouble remembering it, remember that it stands for hypertext reference.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

LEARNING ACTIVITY 1

Home-based Activity:

1. Create an HTML that will end with a page that’s like the one below.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

SUMMARY

In this module, you explored the basics of HTML from the structure, anatomy, syntax to
elements. You’ve learned the following concepts:

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 The anatomy of HTML syntax and document to structure your websites.


 Insert heading levels within a web page.
 Use different formatting.
 Insert ordered and unordered lists within a web page.
 Insert a graphic within a web page.
 Create a link within a web page.

REFERENCES

Web Design with HTML and CSS3: Introductory. 8th Edition

https://www.w3schools.com/html/default.asp

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Online learning materials

https://www.w3schools.com/html/default.asp

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

You might also like