2. What is HTML?
HTML is a language for describing web
pages. It stands for Hyper Text Markup
Language. A markup language is a set of
markup tags. HTML documents contain
HTML tags and plain texts. They are
also called web pages. HTML is easy to
learn and to create. With HTML, you can
create your own website.
3. Identifying the Different Parts of an
HTML Code
An HTML code consists of different parts.
Each of these parts plays a big role and a
specific function in controlling the content
and design of your web pages.
4.
5. HTML TAGS
HTML tags are keywords (tag names)
surrounded by angle brackets like
<html>. HTML tags normally come in
pairs like <b> and </b>. The first tag
in a pair is the start tag, the second tag
is the end tag. The end tag is written
like the start tag, with forward slash
before the tag name. These tags are also
called opening tags and closing tags.
7. HTML <!DOCTYPE> declaration
A well written document begins with a
basic declaration that defines what type
of document it is.
The <!DOCTYPE> declaration is not
an HTML tag; it is an instruction to the
web browser about what version of
HTML the page is written in.
8. HTML <html> tag
The <html> tag tells the browser that
this is an HTML document. It represents
the root of an HTML document.
The <html> tag is the container for all
other HTML elements (except for the <!
DOCTYPE> tag).
9. HTML <head> tag
The <head> element is a container for all
the head elements. It must include a title
for the document, and can include
scripts, styles, meta information, and
more.
Syntax:
11. The <title> element defines a title in the
browser toolbar, provides a title for the
page when it is added to favorites and
displays a title for the page in search-
engine results.
12. HTML <body> tag
The <body> tag defines the document's
body. The <body> element contains all
the contents of an HTML document, such
as text, hyperlinks, images, tables, lists,
etc.
Syntax:
14. Using HTML Tags
HTML tags (otherwise known as "HTML
elements"), and their respective
attributes are used to create HTML
documents so that you can view them in
browsers and other user agents.
15. HTML Headings
Headings are defined with the <h1> to
<h6> tags. <h1> defines the most
important heading. <h6> defines the
least important heading.
Syntax:
17. HTML Paragraphs
An HTML Paragraph is defined by a <p>
tag. Browsers automatically add some
space (margin) before and after each
<p> element.
Syntax:
19. HTML Links
A hyperlink (or link) is a word, group of
words, or image that you can click on to
jump to a new document or a new
section within the current document.
Links are specified in HTML using the
<a> tag.
Syntax:
27. Organizing Webpage Content Using
Tables and Lists
HTML can be used to organize data in
tables or list items using the ordered,
unordered and definition lists.
Tables
Tables are defined with the <table> tag.
28. A table is divided into rows with the <tr>
tag.
32. List
HTML lists appear in web browsers as
bulleted lines of text. There are actually
three different types of HTML lists,
including unordered lists (bullets),
ordered lists (numbers), and definition
lists.
33. Unordered List
An unordered list starts with the <ul>
tag. Each list item starts with the <li>
tag. The list items are marked with
bullets (typically small black circles).
40. Grouping HTML elements using
<div> and <span>
HTML elements can be grouped together
with <div> and <span>.
HTML <div> Element
The HTML <div> element is a block level
element that can be used as a container
for grouping other HTML elements.
45. Tools Needed?
Notepad++ - a free source code editor
and Notepad replacement that supports
several languages.
http://notepad-plus-plus.org/
46. Web Browser(s) – a software application
for retrieving, presenting, and
transferring information resources on the
World Wide Web. Here are some
examples of a web browser:
47. Activity:
Step 1
Open the webpage file (juan_file.html)
from xampphtdocsjuan folder and
observe what is wrong with the webpage
format.
48.
49. Step 2
Edit source code using Notepad ++.
Close the file when you’re done taking
notes of what can be improved with the
webpage. Right-click on the same file
(juan_file.html) and click Edit with
Notepad++.
50.
51. Step 3
Modify heading position.
To put the webpage heading in its proper
place, look for <"h1">Matter<"/h1"> at
the bottommost part of the body’s
contents. Cut it and place it just below
the start tag.
52.
53. Step 4
Modifying table contents.
All table data are under the wrong columns.
Analyze the code for tables and put the data
on their proper columns. In order to do this,
rearrange the (table data). The first should
be an item under the first column (Solid),
the second data is an item under the Liquid
column and the third should belong to the
Gas column. Cut and paste to change their
positions in the code.
54.
55. Step 5
Modifying image attributes.
Images are also displayed in the webpage and are placed
inside the tables. Some images cannot be seen but some
are visible. Src is the only attribute used in the code. This
attribute contains the URL of the image that you want to be
displayed on your webpage. For all the images to appear,
make sure that the spelling of the attribute (src) is correct,
no other attribute can be used to contain the URL of the
image but the src, and the image URL is correct especially
the file format (to know the file format of the image
check the Juan’s File folder where the images are placed).
56.
57. Step 6
Modifying link attributes.
Some links are not directing to another
page. The syntax for links is Link Text.
Make sure that the href attribute is the
only one used in all link tags. Also, check
if all URLs are working.
58.
59. Step 7
Modifying text format
The texts on the webpage are all on one
paragraph. To make it more readable,
use line breaks
and separate the paragraphs/sentences
which should not be grouped together
using the tag.
60.
61. Step 8
Save and finalize file.
When done with all the modifications,
click File > Save. Open juan_file.html
from the Juan’s File folder to check your
work if there are still modification that
needs to be done. The webpage that you
edited should look something like the
image on the right. If you wish to add a
little design/style to you work, you can
do so.
