Web 01 - 03
Web 01 - 03
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.
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 …
with quotation marks. <h6> Heading 6</h6>
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 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
all other HTML elements except for <!DOCTYPE>.
</tr> Jack</td>
<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.
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.
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.
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">
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>
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
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
CSS is currently on its third version, CSS3, which allows animations, more visual effects, and more support for
layout features such as columns and grids. This version is more dependent on the user’s browsers. With HTML,
browsers treat unknown tags as plain text, making them render properly, while older browsers are unlikely to
support newer features of CSS3.
Although HTML and CSS perform different functions for a website, they are often linked as they are both
processed by a browser. They are also the two (2) fundamental languages for making modern websites, though
HMTL is only required to make a webpage, without CSS, the webpage will not look much more than a Microsoft
Word document.
Figure 1. HTML only. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc.
Figure 2. HTML with CSS. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc.
CSS is used to change the look and user experience of a webpage by targeting HTML elements and applying
different styles such as formatting the text, changing the font, or arranging the layout.
The “cascading” part of CSS means that styles are applied in the order they are encountered by the browser,
from the top of the style sheet to the bottom. If line 1 is defined that paragraphs should have blue text, and line
10 is defined to have red, the paragraphs will have red text.
CSS uses codes to define the styles to be applied to each element in a webpage. A collection of these code
statements is called a style sheet which can be stored in the HTML document they apply to or in separate text
files.
p { In this syntax, p is the selector, which is the specific HTML element to be styled
font-size: 30px; with CSS. The selector is followed by an opening and closing curly brace which
color: orange; contains the declaration. The declaration includes the property (font size,
} color), and the value (30px, orange), and ends with a semicolon (;).
There are two (2) primary approaches to adding CSS to any webpage: as an internal style sheet in the HTML
document and as an external style sheet in a separate file.
<!DOCTYPE>
<html>
<p>Reminder to be kind.</p>
Output:
<style>
p {
font-size: 30px;
color: orange;
}
</style>
</html>
Using style.css for example, the syntax would look like this:
The <link> tag uses the href attribute which refers to the relative or
<link rel="stylesheet"
absolute URL of the file, and the rel attribute to specify the relationship
href="style.css" />
between the current document and the linked document.
In CSS, the font-family property is used to define the font. It is a comma-separated list of fonts from highest to
lowest priority, with the font to be used listed first and followed by others in the order they are to be used. This
process is called font stack.
p {
This code tells the browser to use Times New Roman first.
font-family: Times New Roman,
If it is not available, it uses Cambria as a fallback. It uses
"Cambria", serif; the system’s default serif font if it is also unavailable.
}
Sizing Text
Text can be resized using the font-size property such as:
p { Different units of measurement are used in this property. Pixels (px) is a fixed
font-size: 30px; measurement that gives designers the most control over the size, and
} Percentage (%), which has a default size of 16px.
Formatting Text
The font-weight property allows the application of different boldness to text including normal which is the
unbolded text, lighter which is thinner than the normal weight, bold which creates darker text, and bolder
which makes text thicker than the bold weight. It uses font-weight: value; as its descriptor.
The font-style property italicizes text. It includes normal which is the normal, straight text, italic which uses
the italic style, and oblique which uses the oblique style. It uses font-style: value; as its descriptor.
The text-decoration property allows emphasis lines to text. It includes none which means no change,
underline to add a like under the text, overline which adds a line over the text, and line-through which is
the same as a strike. It uses text-decoration: value; as its descriptor.
The text-align property aligns the text horizontally. It uses text-align: value; as its descriptor. The values
include left, right, center, and justify.
Adding Colors
Finding the right color scheme for a website is essential to good design. Codes and names of acceptable colors
are available on the Internet. There are three (3) methods to define colors in CSS:
RGB: A comma-separated list of the amount of red, green, and blue in a color, ranging from 0 to 255.
Hexadecimal (hex) values: A six-character code that defines the RGB in a color preceded by a #.
Color names: A set of predefined names for colors. The easier method to use.
Background Property
This adds an image or a color to the background of the webpage. The background image can be set in horizontal
and vertical views.
It uses background-image: value; as its descriptor. The value is the link to the image. The descriptor
background-repeat: no-repeat sets the background without repetition, while repeat-x; and repeat-y
values repeat the background horizontally and vertically, respectively,
Border
This can be put on all four sides or put individually on any side. This can also be modified using colors, styles,
width, radius, margin, and padding. Margin is the property that adds spacing around the content, while padding
adds spacing within the elements or white space inside the container.
Specifies the width on all sides of a border. The first width refers
border-width: 2px 5px 3px 8px;
to the top border, the second to the right side, the third to the
bottom, and the last style to the left side.
Specifies the width for the top, bottom, right and left borders.
border-width: 2px 3px 5px;
The first width refers to the top border, the second width to the right
and left borders, and the last width to the bottom border.
Specifies the width for the top and bottom borders and left and
border-width: 4px 5px;
right borders. The first width refers to the top and bottom borders,
while the second refers to the right and left borders.
border-right-width: 10px; Sets the width of any specified border.
margin: auto; Sets the content to the center of the container
Table 1. Syntax table
The concept for setting up the width is the same as setting up the radius, margin, and padding.
References:
Casabona, J. (2020). 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.