HTML is used to define content’s meaning, and CSS is used to define how content and
Webpage will look.HTML has three principal markup components: elements, attributes, and values.
Elements are like little labels that describe the different parts
of a Web page.
Attributes contain information about the content in the document, as
opposed to being content itself.
Uniform Resource
Locator, or URL, It contains
information about where a file is and what a browser should do with it. The
first part of the URL is called the scheme. The
second part of the URL is the name of the server where the file is located,
followed by the path that leads to
the file.
To start an HTML5 page:
1. Type <!DOCTYPE
html>
2. Type <html
lang="language-code">, where language-code is
the language code that matches the default language of page’s content
3. Type <head> to
begin the document head of page.
4. Type <meta charset="UTF-8" /> to declare the character encoding of your document as
UTF-8.
5. Type <title></title>. This will contain a page’s title.
6. Type </head> to
end the document head of page.
7. Type <body> to
start the body of my page. This is where the content will go (eventually).
8. Leave a few blank lines for creating a page content
9. Type </body> to
end the body.
10. Type </html> to
end my page
The
document head is where I define the title of page.
The
body element encloses my page’s content, including text, images,
forms, and anything else.
Creating Headings
HTML
provides six heading levels for establishing the hierarchy of information in
pages. Mark up each heading with one of the h1–h6 elements, where h1 is
a top-level heading, h2
is a subheading of an h1, and h3 is a
subheading of an h2.
To group two or more headings:
1. Type <hgroup>.
2. Type <hn>,
where n
is a number from 1 to 6, depending
on the level of importance of the heading that I want to create.
3. Type the contents of the header.
4. Type </hn> where
n is the same number used in step 2.
5. Repeat steps 2 through 4 for as many headings as I want to
be part of the hgroup.
6. Type </hgroup>.
To designate a group of links as
important navigation:
1. Type <nav>.
2. Type list of links structured as a ul (unordered list) unless the order of the links is
significant, in which case should structure them as an ol (ordered list).
3. Type </nav>.
The
article element represents a self-contained composition in a document,
page, application, or site.
To create an article:
1. Type <article>.
2. Type the article’s contents, which could include any
number of elements, such as paragraphs, lists, audio, video, images, figures,
and more.
3. Type </article>.
To define a section:
1. Type <section>.
2. Type the section’s contents, which could include any number of
elements, such as paragraphs, lists, audio, video,images, figures, and more.
3. Type </section>.
To add a comment to HTML page:
1. In your HTML document, where I wish to insert a comment,
type <!--.
2. Type the comments.
3. Type --> to
complete the commented text.
To begin a new paragraph:
1. Type <p>.
2. Type the contents of the new paragraph.
3. Type </p> to end the paragraph.
If
want to provide author contact information for the page:
2. Type <address>.
3. Type the
author’s email address, a link to a page with contact information, and so on.
4. Type </address>.
The date time Format: YYYY-MM-DDThh:mm:ss
To mark important text: <strong>
To emphasize text: <em>
To cite a reference: <cite>
To quote a short text:
<q>
To highlight a text: <mark>
To
mark the defining of a term:
1. Type <dfn>.
2. Type the term
you wish to define.
3. Type </dfn>.
To mark
an edit involving newly inserted text:
1. Type <ins>.
2. Type the new content.
3. Type </ins>.
To mark
an edit involving deleted text:
1. Place the cursor before the text or element that wish to
mark as deleted.
2. Type <del>.
3. Place the cursor after the text or element that wish to
mark as deleted.
4. Type </del>.
To mark text that is no longer accurate
or relevant: <s>
To
specify fine print:
1. Type <small>.
2. Type the text that represents a legal disclaimer, note,
attribution, and so on.
3. Type </small>.
To
insert line or break: <br>
Meter: measurement
6factors to remember when create a webpage:
Format, color, size and resolution,
speed, transparency and resolution.
To
insert an image on a page:
1. Place the cursor in the HTML code where I want the image
to appear.
2. Type <img src="image.url", where image.url indicates the location of the image file on the server.
3. Type a space and then the final />.
To offer alternate
text when images don’t appear:
1. Within the img tag, after the src attribute and
value, type alt=".
2. Type the text that should appear if, for some reason, the image
itself does not
3. Type ".
A link has 2 main parts:
the destination and the link.
To
create a link to an anchor:
1. Type <a href="#anchor-name">, where anchor-name is the value of the destination’s id attribute create an anchor”).
2. Type the label text, that is, the text that is highlighted
(usually blue and underlined by default) and that when activated will take the
user to the section referenced in step 1.
3. Type </a> to
complete the definition of the link.
