Scribd
Upload
39 views

Lesson 1: (Hypertext Mark-Up Language)

HTML is the building block of websites. It uses tags to identify content and structure webpages. The basic structure of an HTML document includes the <html>, <head>, and <body> tags. The <head> contains metadata like the <title>. The <body> holds visible content. HTML elements like paragraphs, headings, links, images, lists, tables, and forms can be used to structure and style webpages. Attributes provide additional information to modify elements. Learning HTML provides the foundation for developing websites.

Uploaded by

Elisavel Laure Miral
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
39 views

Lesson 1: (Hypertext Mark-Up Language)

HTML is the building block of websites. It uses tags to identify content and structure webpages. The basic structure of an HTML document includes the <html>, <head>, and <body> tags. The <head> contains metadata like the <title>. The <body> holds visible content. HTML elements like paragraphs, headings, links, images, lists, tables, and forms can be used to structure and style webpages. Attributes provide additional information to modify elements. Learning HTML provides the foundation for developing websites.

Uploaded by

Elisavel Laure Miral
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

LESSON 1

HTML
(HYPERTEXT MARK-UP LANGUAGE)
BUILDING BLOCK OF WEBSITES

ITS 300 - WEB DEVELOPMENT 1


Specific Learning Outcomes
1. Demonstrating proper use of HTML tags
2. Develop intended layout with the use HTML tags.
3. Constructing a webpage with the appropriate practice of HTML tags
Motivation/Prompting Question(s)
• What is a website?

A website is a collection of information and graphics displayed through a number


webpages located on the internet or World Wide Web which can be accessed by Web
Browsers like for example Google Chrome and Mozilla Firefox.

• What is the most common website nowadays?

As of these times, what is most common would likely be Facebook. Why? It is THE
social network with billions of users, amounting to almost the whole population due
to the technological age we are in today.
Motivation/Prompting Question(s)
• What do you think it takes to build a website like that?

To build such a website requires great skill and an unbelievable amount of


experience. To build such great things takes time. In this module will be the start of
your journey to building websites, starting with the building block of all websites,
the markup language HTML.
DISCUSSION
HTML
What is HTML? HTML which means for Hyper Text Markup Language is the building block for
websites. Unlike scripting or programming languages that use complicated codes and scripts to
perform functions, HTML uses tags to identify content.

The Web
Structure
Being able to code in HTML is essential for any aspiring web developer or professional. Gaining
this skill is the beginning for you to learn how to develop websites.
 
Modern Web Design
 
HTML: Structure
CSS: Appearance
JavaScript: Behavior and Actions
PHP or others: Backend
HTML
Basics
<html>
The structure of an HTML document is like a sandwich with each html tag acting as the bread slice or
bun for the contents of the website for without the bread it won’t be called a sandwich.

<head>
The <head> tag is found at top of the HTML document. The head tag contains most of the non-visual
elements for the webpage.
<body>
What follows the <head> tag is the body tag which is written as <body>. All visible elements are contained
within the body tag of and HTML document.

The HTML file


Add the basic structure to your text editor, it could be Notepad, Notepad++, Sublime, etc. with
“Hello World” in the body section.
In this example, save the file as HelloWorld.html. After saving the file when it is opened the following
is the result displayed in the web browser.
<title>
To place a title on the tab of your browser for your web page, add a <title> element to your head section.

Save the file and it will produce the following result:


Paragraphs
 
To create a paragraph, type the <p> element with its opening and closing tags.
Single Line Break

To add a single line of text without starting a new paragraph use <br />.
Formatting Elements

There are a many elements that give a specific text style. Formatting elements were made to create
special types of text.
HTML Basics
Headings, Lines, Comments
HTML Basics: Headings, Lines, Comments
HTML Headings

HTML headings have six levels; these headings are arranged according to size.
These levels are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
HTML Basics: Headings, Lines, Comments
Horizontal Lines

Use <hr /> to create a horizontal line on you HTML page.


HTML Basics: Headings, Lines, Comments
Comments

Your Browser does not display comments on your HTML page but it helps you add description and
notes to your HTML document.
HTML Elements

HTML documents are made up of elements. These elements are written using a start tag and an end tag.

Some elements like <br /> and <hr /> do not have end tags.
HTML Attributes

HTML attributes are what provide additional information about an element or tag and also modify them.
An example below is the “align” attribute with the value “center”.
Attribute Measurements

We can also modify measurements of elements using attributes. In the example below we modify the
horizontal line to a width of 50 pixels.
The Align Attribute

The align attribute is used to state how the text is


aligned.
HTML Images

The <img> Tag


The <img> tag is used to insert an image. It comprises of only attributes, and does not have a closing tag. The
image’s URL(addresss) can be defined using the src attribute.
HTML Images
Image Location

The image location for the src attribute is between the quotation marks (“ ”).

Example 1. If you have an image named “image.jpg” in the same folder as the HTML file, your code
should look like the example provided in the <img> tag example:
Example 2. If you have an image named “image.jpg” in another folder, your code should look like this:
HTML Images
Example 3. In case the image cannot be displayed, the alt attribute specified an alternative text that describes
the image in words. The alt attribute is required.
HTML Images
Image Resizing

Image resizing is used to define the image size, the image width and image height attributes.
Note: The value can be specified in pixels or as a percentage.

Note: Loading images takes time. The use of large images can slow down your page.
HTML Images
Image Border

By default, an image has no border. The use of border attribute within the image tag is needed to create
a border around the image.
HTML Links
The <a> Tag

Links are one of the integral parts of every web page. Adding links to text or images will enable the
user
to click on them in order to be directed to another file or webpage.
HTML links are defined using the <a> tag.
Use the “href” attribute to define the link’s destination address:
HTML Ordered Lists, Unordered Lists
An ordered list in HTML defined using the <ol> tag with each listed item defined by a
<li> tag.
HTML Ordered Lists, Unordered
Lists
An unordered list starts with the
<ul> tag.
HTML Tables
To create an HTML table, you use the <table> tag. These tables are divided into rows by using
the <tr> tag. The tables rows are divided into column or table data which then we use the
<td> tag.

Here is an example code of a table with a single row and three columns:
HTML
Tables
Border, Colspan and bgcolor Attributes
You can add a border to your table element using the border attribute.

A table cell can span to two or more columns using the colspan
attribute.
HTML
Tables
To specify a color for a table cell you can use the bgcolor attribute to change its color.
HTML Forms
To collect information from the users of your webpage we use forms defined by the <form> tag.

The action attribute is used to point to a webpage or link that will load after the form is submitted
HTML Forms
The method attribute specifies the HTTP method to be used when forms are submitted.
When you use GET, the form data will be submitted to the page address or URL.

You use POST when the form is for updating data or when you are handling sensitive information
like passwords. POST requests offer better security because the submitted data will not be visbile in the
page address or URL.
Form Elements and Input Types
Text Input Type
When getting input from users like sentences we use the <input> with the attribute type as text.
Form Elements and Input Types
Textarea Element
When you need to get more input from the user like paragraphs and essays we use the <textarea> element.
Form Elements and Input Types
Radio Input Type
When using the radio input type, it allows the user the ability to choose one from a number of choices.

Checkbox Input Type


To give the user the ability to choose multiple items we use the checkbox input type.
Form Elements and Input Types
Password Input Type
For getting sensitive input like passwords that need to be secured we use the password input type.

File Input Type


For when you need the user to choose a file to upload we must use the file input type.
Form Elements and Input Types
Number Input Type
When you need the user to input numbers instead of text we have the number input type for that.

Date Input Type


For getting specific date input form users the date input type lets the u ser choose a date.
THANK YOU.

Prepared by: KIM JOHN A. CULANAG

You might also like