Scribd
Upload
52 views4 pages

01 Handout 1

The document discusses HTML including how it works, its basic elements like headings, paragraphs and links, and other structures like tables and forms. HTML elements have opening and closing tags that contain attributes to provide additional styling and formatting. A proper HTML document structure includes elements like <html>, <head>, <body> and follows conventions to be read as HTML by web browsers.

Uploaded by

naegahosh1615
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
52 views4 pages

01 Handout 1

The document discusses HTML including how it works, its basic elements like headings, paragraphs and links, and other structures like tables and forms. HTML elements have opening and closing tags that contain attributes to provide additional styling and formatting. A proper HTML document structure includes elements like <html>, <head>, <body> and follows conventions to be read as HTML by web browsers.

Uploaded by

naegahosh1615
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/ 4

IT2301

INTRODUCTION TO HTML An HTML document can be opened and modified using various source
code editors and web development applications such as Microsoft
How HTML Works Visual Studio Code and Adobe Dreamweaver. Since HTML is saved
in plain text, it can be opened and modified in any basic text editor,
Introduction to HTML and its Specification such as Windows Notepad and Apple TextEdit. Still, they do not have
features that make coding easier for developers.
HyperText Markup Language (HTML) is the standard markup
language for creating Web pages, no matter how simple or complex. Another critical requirement for an HTML document is saving it with a
It allows a web author to arrange and define how content should be .html file extension. To preview an HTML webpage, open the
displayed. document on a web browser such as Google Chrome, Microsoft Edge,
or Apple Safari.
The “HyperText” in HTML refers to how links on the Web let users
move from one document to another. It happens when clicking a HTML Basics
highlighted link related to the topic being read in an article takes the
reader from that page to another. HTML Element

HTML has been evolving as a technology standard since Tim Berners- It is the component of an HTML document containing formats,
Lee's introduction in 1993. HTML5 is the fifth and latest version of the instructions, and semantic meaning. It consists of a start tag, content,
language. HTML5 supports multimedia such as audio and video, new and an end tag, such as the following:
tags, elements, and application programming interfaces (API).
<p> Hello World! </p>
The World Wide Web Consortium (W3C) manages the specifications
of what is in HTML and what is not. Companies that create web Paragraph <p></p> – the basic unit of text in an HTML document.
browsers take their specifications and implement behaviors expected
when browsers come across any of the allowed formatting, such as An HTML element such as a paragraph may also contain another
making text bold, changing its color, and even both element such as the following, <strong> World! </strong> being
simultaneously. The HTML specifications constantly evolve, and the the other element. <br> element is used to add a line break to the
changes from version to version are only added to expand browser HTML code and creates another blank line. It has no end tag.
functionality and modernize technology.
<p>
HTML Document Hello
<strong>
It is a text file created in any text editor containing textual content, World!
elements, attributes, and tags such as <html>, <head>, <title>, </strong>
and <body>. These naming conventions tell the computer and the <br>
web browser that it is in HTML and should be read as such. By Welcome!
applying these conventions to a text file, a user can write and design </p>
a basic webpage and upload it to the Internet.

01 Handout 1 *Property of STI


[email protected] Page 1 of 4
IT2301

HTML Attribute Headings

It is used to modify or define an HTML element. It is placed within an These are titles or subtitles that can be displayed on a webpage. It has
element's opening tag, which can contain multiple attributes separated six (6) levels, with the heading number indicating a heading of less
by a space. It is also known as the name=value pair, as it provides importance, <h1> being the top level, and <h6> as the lowest.
additional styling to the element.
Sample
Example:
<p class=”important”> Hello World! </p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
class is the attribute name, while important is the value enclosed …
<h6> Heading 6</h6>
with quotation marks.

HTML Tags Links

These keywords define how web browsers will format and display the a href attribute that specifies the URL of the webpage the link goes
content on an HTML file. They are the starting and ending parts of an to. It must have a destination and a label. Syntax: <a
HTML element. Whatever is written inside the angle brackets (<,>) are href=”URL”></a>
called tags. The most common kind consists of strings or a sequence
of characters enclosed in opening and ending tags, like the following: An absolute URL directs to another website such as:
<a href=https://www.google.com.ph> Google </a>

A relative URL directs to a file within the same website, such as:
<a href=”image.html”> Sample Products </a>

Form

It is an alternative way to interact with the server and collect user


inputs. It is constructed in HTML in the same manner as table <table>
or list <li>. It uses <form> tag.

A sample that displays a form for name submission:


Source: Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be <form action=”#”>
dangerous. Addison-Wesley <input type=”text” placeholder=”FirstName”/>
Figure 1. Anatomy of a typical HTML tag <br>
<input type=”text” placeholder=”LastName”/>
Figure 1 details the anatomy of a typical tag, including the name of <br>
the element (strong), angle brackets, and a forward slash (/ - marks <input type=”text” placeholder=”Email”/>
the end tag). </form>

01 Handout 1 *Property of STI


[email protected] Page 2 of 4
IT2301

HTML Table HTML Structure

It consists of table cells that allow web developers to organize and HTML follows a proper structure to have an organized syntax in an
arrange data into rows and columns. It uses <table> tag. HTML document.
Table Elements
• Table Header <th> – the top row of a table that acts as a title Sample HTML Structure:
for the type of information in each column. <!DOCTYPE>
• Table Row <tr> – used to indicate the number of rows <html>
displayed in a table. <head lang=“en”>
• Table Data <td> – holds the data displayed in a table. The <title> My first Web Page</title>
data must match the position of the header it corresponds to. <meta charset=”utf-8”/>
• Colspan is used to join two or more columns in a table, while <link rel=”stylesheet” href=”../css/hw.css”/>
Rowspan is used to do the same for rows. Border attribute is <script src=”hellowordjs.js”></script>
used to separate the table cells. </head>
• <thead>, <tfoot>, and <tbody> are used to group the <body>
header, footer, and body content in a table. <h1 class=”sample”>Hello World!</h1>
<body>
<th>, <tr>, and <td> Using colspan and rowspan </html>
<table> <table>
<tr> <tr> In this sample structure, it uses the following syntax and elements:
<th>Firstname</th> <th>Name</th>
<th>Lastname</th> <th>Subject</th> 1. <!DOCTYPE> – short for Document Type Definition that tells the
</tr> <th>Marks</th> browser or any software reading the HTML document what type
<tr> </tr> of document is about to be processed. The HTML document will
<td>Aryan</td> <tr> not work without this element.
<td>Gupta</td> <td> rowspan=“2”> 2. <html> – also referred to as “root element.” It is the container for
</tr> Jack</td> all other HTML elements except for <!DOCTYPE>.
<tr> <td>Math</td> 3. <title> - shows extra information about an element.
<td>John</td> <td>94</td> 4. <head> – the container for metadata (data about data) which is
<td>Reece</td> </tr> placed between the <html> and the <body> tags.
</tr> <tr> 5. <meta> – used to specify the page description, author of the
<tr> <td>Science</td> document, character coding, and other metadata.
<td>Samntha</td> <td>88</td> 6. <body> – defines the content in an HTML document displayed in
<td>Grooves</td> </tr> the browser.
</tr> <tr> 7. <link> – defines the connection between the current document
</table> <td colspan = “3”> Row and an external source.
3 Cell 1</td> 8. <script> – used to embed a client-side script (JavaScript) that
</tr> either contains scripting statements or points to an external script
</table> file through the src attribute.

01 Handout 1 *Property of STI


[email protected] Page 3 of 4
IT2301
References:
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous.
Addison-Wesley.
Gupta A. (2021). A complete guide to HTML tables. [Web Article]. Retrieved on
January 23, 2022, from https://www.simplilearn.com/tutorials/html-tutorial/html-
tables
Lutkevich B. (2022). HTML (hypertext markup language). [Web Article]. Retrieved on
January 20, 2022, from https://www.theserverside.com/definition/HTML-
Hypertext-Markup-Language

01 Handout 1 *Property of STI


[email protected] Page 4 of 4

You might also like