Scribd
Upload
29 views25 pages

Itec106 01 HTML

This document provides an overview of HTML (Hypertext Markup Language) by defining what HTML is, describing its basic components like tags and attributes, and explaining several important HTML elements. HTML is used to structure and present content on the web through tags, attributes, and elements. It introduces key concepts like block-level and inline elements, lists, links, images, forms, and tables. Semantic elements are also defined as providing meaning about the content.

Uploaded by

Lizette Paez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views25 pages

Itec106 01 HTML

This document provides an overview of HTML (Hypertext Markup Language) by defining what HTML is, describing its basic components like tags and attributes, and explaining several important HTML elements. HTML is used to structure and present content on the web through tags, attributes, and elements. It introduces key concepts like block-level and inline elements, lists, links, images, forms, and tables. Semantic elements are also defined as providing meaning about the content.

Uploaded by

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

HTML

ITEC 106
What is HTML
• Hyper Text Markup Language
• Created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989
• Hypertext means the document contains links that allow the reader to
jump to other places in the document or to another document
altogether
• Latest version is known HTML5
• A Markup Language is a way that computers speak to each other to
control how text is processed and presented. To do this HTML uses two
things: tags and attributes.
What are HTML tags?
• Tags are used to mark up the start of an HTML element and they are
usually enclosed in angle <> brackets. An example of a tag is: <h1>.
• Most tags must be opened <h1> and closed </h1> in order to
function.
What are HTML attributes?
• Attributes contain additional pieces of information. Attributes take
the form of an opening tag and additional info is placed inside.
• An example of an attribute is: <img src="mydog.jpg" alt="A photo of
my dog.">
• In this instance, the image source (src) and the alt text (alt) are
attributes of the <img> tag.
Golden Rules To Remember
1. The vast majority of tags must be opened (<tag>) and closed
(</tag>) with the element information such as a title or text resting
between the tags.
2. When using multiple tags, the tags must be closed in the order in
which they were opened. For example:
<strong><em>This is really important!</em></strong>
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top of every
HTML page that you create.
• <!DOCTYPE html> — This tag specifies the language you will write on
the page. In this case, the language is HTML 5.
• <html> — This tag signals that from here on we are going to write in
HTML code.
• <head> — This is where all the metadata for the page goes — stuff
mostly meant for search engines and other computer programs.
• <body> — This is where the content of the page goes.
Further Tags
Inside the <head> tag, there is one tag that is always included: <title>,
but there are others that are just as important:
<title>
• This is where we insert the page name as it will appear at the top of
the browser window or tab.
<meta>
• This is where information about the document is stored: character
encoding, name (page context), description.
Other elements
• We also have a number of
other elements we can use
to control the text or make
it appear in a certain way.
The Anchor tag
• The <a> (or anchor) opening tag is written in the format:
<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>
• href = Hypertext REFerence
• The first part of the attribute points to the page that will open once the link is
clicked.
• Meanwhile, the second part of the attribute contains the text which will be
displayed to a visitor in order to entice them to click on that link.
• If you are building your own website then you will most likely host all of your
pages on professional web hosting. In this case, internal links on your website
will <a href=”mylinkedpage.html”>Linktle Here</a>.
The Image tag
• The <img> tag normally is written as follows:
<img src="yourimage.jpg" alt="Describe the image" height="X"
width="X">

• Alt text is important to ensure that your site is ranked correctly on


search sites and also for visually impaired visitors to your site.
• The file types generally used for image files online are: .jpg, .png,
and .gif.
HTML List
Ordered List
• The first is an <ol>: This is an ordered
list of contents. For example:
1. An item
2. Another item
3. Another goes here.
• Inside the <ol> tag we list each item
on the list inside <li> </li> tags.
HTML List
Unordered List
• The second type of list that you
may wish to include is an <ul>
unordered list. This is better
known as a bullet point list and
contains no numbers.
• This is
• An Unordered
• List
HTML List
• Definition List
• Finally, you may wish to include a definition list <dl> on your page. An
example of a <dl> list is as follows:
Table tag
•A table is defined using the <table> element, and contains a number of
table cells ( <td>, for “table data” ) which are organized into table rows ( <tr
>). The markup (HTML code) for a table is always based on rows, never
columns.
•Table cells which act as column headers or row headers should use the
<th> (table header) element.
•Table cells can be merged using the colspan and rowspan attributes.
•Tables can be broken into sections using the following elements:
•<thead> — Table header
•<tbody> — Table body
•<tfoot> — Table footer
•A caption can be added to a table using the <caption> element.
HTML Forms
HTML Forms are required, when you want to collect some data from
the site visitor. For example, during user registration you would like to
collect information such as name, email address, credit card, etc.
HTML Block and Inline Elements
Block-level Elements
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
Here are the block-level elements in HTML:
Inline Elements
Inline Elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
Here are the inline elements in HTML:
What are Semantic Elements?
• A semantic element clearly describes its meaning to both the browser
and the developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.
• Examples of semantic elements: <form>, <table>, and <article> -
Clearly defines its content.
READ MORE! (kasama sa MIDTERM)
https://www.w3schools.com/html/html5_semantic_elements.asp

You might also like