Scribd
Upload
77 views

CP2-Q1 Module 1.

The document provides an introduction to HTML including basic tags like headings, paragraphs, links and images. It explains elements, attributes, and how to view source code. Key topics covered are the <!DOCTYPE> declaration, nested elements, empty elements, and common attributes like href, src, alt, width, height and title.

Uploaded by

Joshua Bonsol
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

CP2-Q1 Module 1.

The document provides an introduction to HTML including basic tags like headings, paragraphs, links and images. It explains elements, attributes, and how to view source code. Key topics covered are the <!DOCTYPE> declaration, nested elements, empty elements, and common attributes like href, src, alt, width, height and title.

Uploaded by

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

COMPUTER PROGRAMMING

(.NET TECHNOLOGY) 2
Second Semester
Quarter 1 Module 1

HYPERTEXT MARKUP LANGUAGE (HTML) TUTORIAL SERRIES


▶️HTML INTRODUCTION ▶️HTML BASIC
▶️HTML EDITORS ▶️HTML ELEMENTS

Name of Student:
Specific Objectives:
WHAT I At the end of the lesson, you should achieve the following objectives:
NEED
TO KNOW 1. Identify the purpose of HTML Basic;
2. Apply the basic codes in HTML Elements; and
3. Comprehend with CSS Attributes.

WHAT I KNOW

Identification: Give the equivalent command of the shortcut key in each number.
Write your answer on the space provided before each number.
Shortcut Keys:
____________ 1. Ctrl + V ____________ 6. Ctrl + X
____________ 2. Ctrl + A ____________ 7. Alt + tab
____________ 3. Ctrl + N ____________ 8. Ctrl + C
____________ 4. Ctrl + Z ____________ 9. Ctrl + S
____________ 5. Ctrl + Y ____________ 10. Ctrl + P

WHAT’S NEW

Direction: Answer the question below.


⏹️Are you familiar with HTML? What is it?
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

WHAT IS IT

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

1
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly. It must only appear once, at the top of the page (before
any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

HTML Links
HTML links are defined with the <a> tag:

The link's destination is specified in the href attribute.


Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:

2
How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window containing the
HTML source code of the page.

Inspect an HTML Element:


Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and the
CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that
opens.

HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements


HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

3
Example Explained
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:

The <body> element defines the document's body.


It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:

The <h1> element defines a heading.


It has a start tag <h1> and an end tag </h1>:

The <p> element defines a paragraph.


It has a start tag <p> and an end tag </p>:

Never Skip the End Tag


Some HTML elements will display correctly, even if you forget the end tag:

However, never rely on this! Unexpected results and errors may occur if you
forget the end tag

Empty HTML Elements


HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
4
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends lowercase
in HTML, and demands lowercase for stricter document types like XHTML.

HTML Tag Reference


Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

HTML Attributes
HTML attributes provide additional information about HTML elements.
•All HTML elements can have attributes
•Attributes provide additional information about elements
•Attributes are always specified in the start tag
•Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to:

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:

There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use
it, you may be in violation of copyright laws. In addition, you cannot control external
images; it can suddenly be removed or changed.

5
2. Relative URL - Links to an image that is hosted within the website. Here, the URL
does not include the domain name. If the URL begins without a slash, it will be relative
to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will
be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change
domain.

The width and height Attributes


The <img> tag should also contain the width and height attributes, which specify the
width and height of the image (in pixels):

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an image, if
the image for some reason cannot be displayed. This can be due to a slow connection,
or an error in the src attribute, or if the user uses a screen reader.

6
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and
more.

The lang Attribute


You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:

Country codes can also be added to the language code in the lang attribute. So, the
first two characters define the language of the HTML page, and the last two characters
define the country.
The following example specifies English as the language and United States as the
country:

The title Attribute


The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the
element:

7
Always Use Lowercase Attributes
The HTML standard does not require lowercase attribute names.
The title attribute (and all other attributes) can be written with uppercase or
lowercase like title or TITLE.

Always Quote Attribute Values


The HTML standard does not require quotes around attribute values.

Single or Double Quotes?


Double quotes around attribute values are the most common in HTML, but single
quotes can also be used. In some situations, when the attribute value itself contains
double quotes, it is necessary to use single quotes:

Or vice versa:

Chapter Summary
•All HTML elements can have attributes
•The href attribute of <a> specifies the URL of the page the link goes to
•The src attribute of <img> specifies the path to the image to be displayed
•The width and height attributes of <img> provide size information for images
•The alt attribute of <img> provides an alternate text for an image
•The style attribute is used to add styles to an element, such as color, font, size, and
more
•The lang attribute of the <html> tag declares the language of the Web page
•The title attribute defines some extra information about an element

8
WHAT’S MORE

Direction: Answer the question below.


⏹️Is HTML case sensitive? Why or Why not?
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

WHAT I CAN DO

Direction: Explain the following attributes.

⏹️ Title Attribute
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

⏹️ Style Attribute
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

⏹️ Lang Attribute
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

⏹️ Width and Height Attribute


____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

ASSIGNMENT

DIRECTION: Answer the question below.

Question:
What are the new features and modifications in HTML5?
Write your answer on the space provided. (provide extra sheet is needed)

9
ANSWER:
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

WHAT I CAN SHOW

Which 21st century skill (Communication, collaboration, creativity, critical thinking,


productivity, leadership and technology literacy) do you enhance while learning our
topic? Explain your answer.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

10

You might also like