Scribd
Upload
11 views

Web System Tech

The document discusses HTML including how it works, its basic elements like tags and attributes, and common structures like headings, links, forms, tables. HTML allows arranging and displaying web content through elements like paragraphs, headings, links, forms, tables which are defined with opening and closing tags.

Uploaded by

Cobe Bryn Lopez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Web System Tech

The document discusses HTML including how it works, its basic elements like tags and attributes, and common structures like headings, links, forms, tables. HTML allows arranging and displaying web content through elements like paragraphs, headings, links, forms, tables which are defined with opening and closing tags.

Uploaded by

Cobe Bryn Lopez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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
IT2301

HTML Essentials List

HTML Elements and Attributes It is a way to group a set of related items in HTML. It has two
specifications for ordered and unordered list, but both uses the <li>
Image tag.

It is a way to embed an image or an animated image, such as GIF, on An unordered HTML list starts with <ul> tag and will be marked by
an HTML webpage. The <img> tag has no closing tag and is used bullets, while an ordered HTML list starts with <ol> tag and is marked
with the following syntax: with numbers by default.

<img src="URL" alt="alternate text"> Unordered List Ordered List


<ul> <ol>
The tag contains two attributes: src for specifying the path of the <li>Eggs</li> <li>January</li>
image and alt for determining an alternate text for the image. The <li>Alcohol</li> <li>February</li>
URL includes the file name and the file extension if it is in the same <li>Snacks</li> <li>March</li>
folder. </ul> </ol>

The <img> tag can also contain the width and height attributes for HTML also supports description lists that let users list terms with their
setting the size specification of the image in pixels, such as: descriptions. It uses the <dl> tag to define the description list, the
<dt> tag to define the term, and the <dd> tag to describe each term.
<img src="image.png" alt="display" width="210px"
height="140px"> <dl>
<dt>January</dt>
The style attribute is also used in specifying the dimensions, <dd>- the first month</dd>
preventing styles sheets from changing the image size. The colon <dt>February</dt>
symbol (:) is used for declaring values. <dd>- the second month</dd>
</dl>
<img src="image.png" alt="display"
style="width:210px;height:140px; "> Span

The folder name must be stated in the src attribute if the image is in The <span> tag is used to color or mark up a part of a text or
another sub-folder. document.

<img src="foldername/image.png" alt="display "> <p>My mother


has <span style="color:blue">blue</span> eyes.</p>
The absolute or complete URL must be written in the src attribute if
the image is on another server or website. It acts like the <div> tag, which defines a division or a section in an
HTML document.
<img src="fullurl.com/filename.jpg" alt="display">
02 Handout 1 *Property of STI
[email protected] Page 1 of 4
IT2301

Navigation Text Field

It uses the <nav> tag to define a set of navigation links. The tag is only It displays a single-line text input field for text input and uses the
used for major blocks of navigation links and not all links in an HTML <input type="text "> tag. Text fields have different inputs that web
document. It represents a page section with links to other web pages programmers can apply, including a line of text, password, email,
or parts within the same webpage. contact number, and URL.

<nav> <form>
<a href=”#”> <label for="age">Age:</label><br>
Home <input type="text" id="age" name="age"><br>
</a> <label for="bday">Birthday:</label><br>
<br> <input type="text" id="bday" name="bday">
<a href=”#”> </form>
About Me
</a> Radio Button
</nav>
It allows users to select one of the available options and uses the
<input type="radio"> to display a radio button.
In this sample code, # specifies the unique ID of an element in HTML
which is usually followed by an ID name. The ID attribute's value must <p>Best tourist destination:</p>
be unique in the HTML document, unlike the class attribute that <form>
multiple elements within an HTML document can use. <input type="radio" id="baguio" name="best_place"
value="Baguio">
Forms <label for="baguio">Baguio</label><br>
<input type="radio" id="cebu" name="best_place"
Input and Control Functions value="Cebu">
<label for="cebu">Cebu</label><br>
These are used to gather text information from users and are defined <input type="radio" id="davao" name="best_place"
by the <input> tag, which displays a type attribute such as the text, value="Davao">
radio, checkbox, and button. Note that the default width of any input <label for="davao">Davao</label>
field is up to 20 characters. </form>
The <label> tag is used to label any form elements while the <for>
Checkbox
attribute of the <label> tag must be equal to the ID attribute of the
<input> element to attach them, such as: It allows users to select as many options as possible out of the
available options. <input type="checkbox"> is used to display
<label for="ID">Name:</label><br> checkboxes.
<input type="type" id="ID" name="name" value="val">

02 Handout 1 *Property of STI


[email protected] Page 2 of 4
IT2301

Sample: Submit Button


<p>Top 2 tourist destination:</p>
<form> It allows users to submit any data entered in the input field. <input
<input type="checkbox" id="baguio" name="top2" type="submit "> is used to display a button for submitting the form
value="Baguio"> data to a form handler, typically a file on the server with a script that
<label for="baguio">Baguio</label><br> processes the data.
<input type="checkbox" id="cebu" name="top2"
value="Cebu"> The form handler is specified using the form’s action attribute, which
<label for="cebu">Cebu</label><br> specifies the address where the submitted data will be sent, such as:
<input type="checkbox" id="davao" name="top2"
value="Davao"> <form action="/action_page.php">
<label for="davao">Davao</label> <label for="age">Age:</label><br>
</form> <input type="text" id="age" name="age"
value="37"><br>
Date and Time Control <label for="bday">Birthday:</label><br>
<input type="text" id="bday" name="bday"
It is used to create various date and time inputs. <label> tag is still value="Feb25"><br><br>
used here, along with the following syntax: <input type="submit" value="Submit">
</form>
• <input type="date"> – has a format of mm-dd-yyyy
• <input type="time"> – has a format of hh:mm Multimedia and Graphics
• <input type="month”> – has a format of yyyy-mm
• <input type="week"> – has a format of Week#-yyyy HTML has features that allow multimedia and graphics to be
embedded in a webpage. Multimedia includes audio and videos that
Button boost user experience, while graphics include images, canvas, and
animations that enhance the appearance of a website.
It is used to create a button with different functions and is also defined
by <input> and <button> tags. Audio

Here are the following button controls in HTML form: It is defined using the <audio> tag and uses the <source> element
for the audio source file. The control attribute is used to add audio
• <input type="reset"> – resets the user’s input. controls such as play, pause, and volume. HTML accepts common
• <img> tag is used inside the <button> tag to make an image audio formats such as MP3, OGG, and WAV.
button.
<button type="submit"> <audio controls>
<img src="Thumbnail.png" <source src="audio.mp3">
alt="buttonpng" width="180" height="100" </audio>
>
<button>

02 Handout 1 *Property of STI


[email protected] Page 3 of 4
IT2301

Video

It is defined using the <video> tag and uses the <source> element
for the video source file. The poster attribute is used to display a
thumbnail before playing the video. The control attribute also adds
video controls such as play, pause, and volume. HTML accepts
common audio formats such as MP4, WebM, and OGG.

<video poster=”playbutton.png”
width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>

Canvas

It is defined using the <canvas> tag to draw graphics such as paths,


boxes, circles, text, and adding images. This tag is only a container
for graphics, and it requires JavaScript to draw the graphics.

A canvas has no border and no content on an HTML page, so using


the width and height attributes is necessary to define the size of the
canvas. It is also important to specify its ID attribute such as:

<canvas id="Canvas" width="200" height="100"


style="border:1px solid #000000;">
</canvas>

References:
Casabona, J. (2021). Visual quickstart guide: HTML and CSS. Pearson Education,
Inc.
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and Layout to be dangerous.
Addison-Wesley.
W3Schools (2022). HTML Forms. [Web Article]. Retrieved on January 31, 2022, from
https://www.w3schools.com/html/html_forms.asp

02 Handout 1 *Property of STI


[email protected] Page 4 of 4

You might also like