Basic Structure of HTML
Overview
1. Recap
2. Quiz
3. Discuss and apply
HTML Image elements
Links, anchor tags, tables and
border.
Objectives
1. Understand and apply the basic
structure of HTML.
2. Explain HTML
3. Differentiate an HTML and a
programming language
4. Identify the best IDE for the users
5. Identify the different types of
programmers.
What is HTML?
What is HTML?
HyperText Markup Language
HTML describes the structure of the pages. It uses elements and tags.
It is the most basic building block of the Web.
Is HTML a Programming Language?
The 10 Best IDE for Web Development
Best IDE Alternatives
Here’s a short-list of the best IDE alternatives to check out:
● Visual Studio Code
● Vim
● Sublime Text 3
● NotePad++
● Komodo Edit
● Brackets
Choosing the Right IDE
● It supports your operating system.
● It supports your programming language(S)
● Open source or commercial
● IDE features
● IDE performance
HTML Structure / Anatomy of HTML
<!DOCTYPE html> Tags
<html>
<head>
<title>My First HTML Website</title> Doctype
<meta charset="UTF-8"> HTML Tag
</head> Head Tag
<body>
Welcome to my first HTML Website! Title Tag
</body> Meta Tag
</html> Body Tag
HTML Tags and Attributes
Attributes
Provides additional information about the html tags or elements
ATTRIBUTE
ATTRIBUTE
ELEMENT NAME VALUE
NAME
<p text-align=”right”> Text </p>
ATTRIBUTE
Attribute Name Description
href Hypertext Reference specifies the url (web address) for a link.
<a href=”about.html”>About</a>
src Source of media elements like images, iframes, Audio, Video.
<img src=”logo.png”>
id Set unique id of single element
<h1 id=“MyHeader"> My First HTML Page </h1>
class Group single or multiple elements.
<p class=“intro">This is an Introduction</p>
style Specifies an inline style for an element
<p style="color:green">This is color green paragraph.</p>
alt Specifies an alternative text.
<img src="logo.png" alt=“Company Logo“>
title Tooltip of an element.
<img src="logo.png" title=“This is Company logo”>
Tag Name Description
<h1> </h1> A section heading level 1. Headings are up to <h6></h6>
<p> </p> A paragraph tag
<a> </a> Hyperlink, formerly anchor tag
<img> An image tag
<b> </b> Bold text
<div> </div> Division, a block-level element for grouping
<span> </span> An inline level grouping element
<!--- --> Insert comment in the source code. A short description of code.
Not displayed in the browser
HTML Image Elements
Example
HTML Attribute
<img src="dog.png"> alt="dog photo"
HTML Element SEO - Search Engine Optimization
Learning Outcomes
1. Describe hyperlink
2. Differentiate hyperlink to
hypertext.
3. Determine nesting elements
4. Apply hyperlink to your website.
Hyperlink
Alternatively known as a link and web link, a
hyperlink is an icon, graphic, or text that links
to another file or object.
Hyperlink VS Hypertext
<a href="https://www.wikihow.pet/Take-Care-of-a-Dog">Responsible Pet Owner</a>
Hyperlink Hypertext
HTML Links and Anchor Tags
<a href="https://www.wikihow.pet/Take-Care-of-a-Dog">Responsible Pet Owner</a>
Nesting Elements
Elements can be placed within other elements.
Example
<p>I love <a href="https://www.wikihow.pet/Take-Care-of-a-Dog">
<strong>dogs</strong></p> </a>
Quiz Time
Click the link provided in the chat box.
Learning Outcomes
1. Identify how to add a bullet list into a
website.
2. Determine the types of list.
3. Re-create the World’s First Website.
HTML List
HTML Web Page
<h1>Top level heading: Maybe a page title</h1>
<p>A paragraph of text. Some information we wo
uld like to communicate to the user. This can
be as long or short as we would like.</p>
<ol>
<li>Number one on the list</li>
<li>Number two</li>
<li>A third item</li>
</ol>
HTML LIST
HTML List Web Page
HTMl lists allow web developers
to group a set of related items
in lists.
HTML LIST TAG - Ordered List
HTML LIST TAG - Unordered List
HTML List Tags
Unordered List
Non sequential list. List with bullets. In HTML5, type attribute of
unordered list is deprecated.
UL Example 1: Bullet List
<ul> ● Coffee
<li>Coffee</li> ● Milk
<li>Milk</li> ● Tea
<li>Tea</li>
</ul>
HTML List Tags
UL Example 2: Square List
<ul type=”square”> ■ Coffee
<li>Coffee</li> ■ Milk
<li>Milk</li> ■ Tea
<li>Tea</li>
</ul>
HTML List Tags
Ordered List
Sequential list. Use numbers, alphabets and Roman characters as list
style.
OL Example 1: Uppercase Alphabet List
<ol type=”A”>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
<li>Tea</li> 3. Tea
</ol>
HTML List Tags
OL Example 2: Roman Numeral List
<ol type=”I”>
<li>Coffee</li> I. Coffee
<li>Milk</li> II. Milk
<li>Tea</li> III. Tea
</ol>
HTML LIST - Description List
HTML List Tags
Description List
List with description term and description data.
Syntax:
<dl>
<dt>Description Term</dt>
<dd>Description Data</dd>
</dl>
HTML List Tags
DL Example 1:
<dl>
<dt>HTML</dt>
<dd>Language to create a website. </dd>
</dl>
HTML
Language To create web page.
Activity 1.2: Re-create The World’s First Website
1. Create a new html file.
2. Apply what you have learned about HTML tags, attributes and lists.
3. Save your page as an Actitivy2_html file on your system.
4. Present your version of World’s First Website!
The World’s First Website
Source: http://info.cern.ch/hypertext/WWW/TheProject.html
HTML Code Challenge
1
HTML Table CODE CHALLENGE
Using HTML Table,
Put your name here
And add a short description about
yourself.
HTML Table CODE CHALLENGE
<h1>Welcome to my Site!</h1>
<table>
<tr>
<td><img src="images/profile.jpg"
alt="myprofile"></td>
<td>
<h1><strong>Kae Soriano</strong></h1>
<p> Web Development Instructor - Kodego</p>
<p>I love teaching and milk tea</p>
</td>
</tr>
</table>
HTML Table CODE CHALLENGE
<h1>Welcome to my Site!</h1>
<table cellspacing=”30”>
<tr>
<td><img src="images/profile.jpg" alt="myprofile"></td>
<td>
<h1><strong>Kae Soriano</strong></h1>
<p> Web Development Instructor - Kodego</p>
<p>I love teaching and milk tea</p>
</td>
</tr>
</table>
HTML Table CODE CHALLENGE
<h1>Welcome to my Site!</h1>
<table cellspacing=”30”>
<tr>
<td><img src="images/profile.jpg" alt="myprofile"></td>
<td>
<h1><strong>Kae Soriano</strong></h1>
<p> Web Development Instructor - Kodego</p>
<p>I love teaching and milk tea</p>
</td>
</tr>
</table>
Presentation of Output
HTML - My Portfolio
HTML Reference
https://www.w3schools.com/html/default.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML
Wrap up
What have you learned today?
1. Introduction to Web Development
2. Introduction to Web Stacks
3. HTML Tags
4. HTML Attributes
5. HTML Lists
Thank you!
Learning Outcomes
1. Identify the uses of HTML Table
2. Determine the steps in creating a
table
3. Create HTML table and table
form
HTML Tables
HTML Tables are used to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
Note: To add borders to the table you can use the border attribute.
To define the width of the table you can also use the width attribute.
HTML Tables
<table>
<thead> <th> Name </th> <th> Age </th> <th> Email </th> </thead>
<tr> <td> John </td> <td> 29 </td> john@email.com </tr>
<tr> <td> Jane </td> <td> 27 </td> jane@email.com </tr>
</table>
HTML Table Head
Table Head is used to group the header content of an HTML table.
Table head is uses the tag:
<thead> </thead>
HTML Table Row
Table Row is used to define a row inside the table.
The table row can contain 1 or more <th> or <td>.
Table Row is uses the tag:
<tr> </tr>
HTML Table Data
Table Data is used to define a data cell inside the table.
Table Data is uses the tag:
<td> </td>
<th>Name</th> <th>Age</th> <th>Email</th>
<td>John</td> <td>29</td> <td>john@email.com</td>
<td>Jane</td> <td>27</td> <td>jane@email.com</td>
HTML Tables
<table>
<thead> <th> Name </th> <th> Age </th> <th> Email </th> </thead>
<tr> <td> John </td> <td> 29 </td> john@email.com </tr>
<tr> <td> Jane </td> <td> 27 </td> jane@email.com </tr>
</table>
HTML Table Colspan
Colspan attribute is used to make a cell span for more than 1 column.
Syntax:
<td colspan=”2”> Name Contact Number
Bill 12345 67890
Steve 13579 24680
HTML Table Rowspan
Rowspan attribute is used to make a cell span for more than 1 row.
Syntax:
<td rowspan=”2”>
NAME Bill Steve
12345 13579
Contact Number
67890 24680
HTML Table Rowspan
Rowspan attribute is used to make a cell span for more than 1 row.
Syntax:
<td rowspan=”2”>
NAME Bill Steve
12345 13579
Contact Number
67890 24680
HTML Table Example (Try to add a table in your webpage, no need to add color)
<table>
<tr>
<td>2022 - 2023</td>
<td>Teacher 1</td>
<td>ABC School</td>
</tr>
<tr>
<td>2020 - 2022</td>
<td>Teacher 2</td>
<td>Dream School</td>
</tr>
</table>
HTML Table Example (Try to add a table in your webpage)
<table>
<tr>
<td>2022 - 2023</td>
<td>Teacher 1</td>
<td>ABC School</td>
</tr>
<tr>
<td>2020 - 2022</td>
<td>Teacher 2</td>
<td>Dream School</td>
</tr>
</table>
Table with Emoji
Table with Emoji
<table>
<th rowspan="4"> Skills </th>
<tr>
<td>Front-end Web Development</td>
<td>⭐⭐⭐⭐⭐</td>
<td>Back-end Web Development</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td> Photography</td>
<td>⭐⭐⭐⭐</td>
<td> Social Media
Management</td>
<td>⭐⭐⭐</td>
</tr>
</table>
Table with style
<td style="border: 2px red;">Name</td>
<td style="color: yellow; background-color: blue”;>Name</td>
<td rowspan="2" style="border: 3px violet; border-collapse:
collapse;">Age</td>
<td> <b>Name</b></td>
<td> <strong>Name</strong></td>
Code Challenge 2 - HTML Table
3
HTML Table Forms
HTML Forms are used to collect different kinds of user inputs, such as
contact details like name, email address, phone numbers, or details like
credit card information, etc.
HTML Table Form
<table>
<form>
<table>
<tr>
<tr>
<td>2022 <td>Name:</td>
- 2023</td>
<td><input type="text" name="name"></td>
<td>Teacher 1</td>
</tr>
<td>ABC School</td>
<tr>
</tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
<tr> </tr>
<td>2020
<tr>- 2022</td>
<td>Password:</td>
<td>Teacher 2</td>
<td><input type="password" name="password"></td>
<td>Dream
</tr>School</td>
</tr>
</table>
</table>
</form>
HTML Table Form
<table>
<form>
<tr>
<td>2022<tr>- 2023</td>
<td>Number:</td>
<td>Teacher 1</td>
<td><input type="number" name="number"></td>
<td>ABC </tr>
School</td>
</tr> <tr>
<td>Feedback:</td>
<td><textarea name="message"></textarea></td>
<tr> </tr>
<td>2020 - 2022</td>
<tr>
<td>Teacher 2</td>
<td></td>
<td>Dream<td><input
School</td>
type="submit" value="Submit"></td>
</tr>
</tr> </table>
</table>
</form>
Thank you!
