INTRODUCTION EDITOR
Hyper Text Markup Language Web pages can be created and modified by using
Standard markup language for creating Web pages professional HTML editors
Describes the structure of a Web page For learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
Consists of a series of elements
Step 1: Open Notepad (PC)
Elements tell the browser how to display the content
Windows 8 or later: Open the Start Screen (the window
HTML elements label pieces of content such as "this is a symbol at the bottom left on your screen). Type Notepad.
heading", "this is a paragraph", "this is a link", etc.
Windows 7 or earlier: Open Start > Programs > Accessories
<html> > Notepad
<head>
<title>Page Title</title> Step 1: Open TextEdit (Mac)
</head> Open Finder > Applications > TextEdit
<body>
Also change some preferences to get the application to save
<h1>My First Heading</h1> files correctly. In Preferences > Format > choose "Plain Text"
<p>My first paragraph.</p>
Then under "Open and Save", check the box that says
</body> "Display HTML files as HTML code instead of formatted
</html> text".
Then open a new document to place the code.
HISTORY Step 2: Write Some HTML Code
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the
Notepad menu.
Name the file "[Link]" and set the encoding to
UTF-8 (which is the preferred encoding for HTML files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double
click on the file, or right-click - and choose "Open with").
BASIC
View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page
and select "View Page Source". This will open a new tab
containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose
"Inspect" to see what elements are made up of (you will see
The <!DOCTYPE html> declaration defines that this document both the HTML and the CSS). You can also edit the HTML or
is an HTML5 document CSS on-the-fly in the Elements or Styles panel that opens.
The <html> element is the root element of an HTML page <!DOCTYPE> declaration represents the document type,
The <head> element contains meta information about the helps browsers to display web pages correctly. The <!
HTML page DOCTYPE> declaration for HTML5 is: <!DOCTYPE
The <title> element specifies a title for the HTML page (which html>
is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a HTML Links :
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc. <a href="___ ">___ </a>
The <h1> element defines a large heading
The <p> element defines a paragraph HTML Images :
<img src="__" alt="__" width="_" height="_">
ELEMENTS HEADINGS
HTML elements can be nested (this means that elements can
contain other elements). <h1> defines the most important heading. <h6> defines the
least important heading. ex:
<em> emphasize
<i> italic <h1>Heading 1</h1>
<b> bold <h2>Heading 2</h2>
<p> paragraph <h3>Heading 3</h3>
<h1> heading (1-6) <h4>Heading 4</h4>
<br> breakline <h5>Heading 5</h5>
The HTML standard does not require lowercase tags, but <h6>Heading 6</h6>
W3C recommends lowercase in HTML, and demands lowercase
for stricter document types like XHTML. EXAMPLE OF DOCUMENT STRUCTURE :
<h1> - Page title
HTML ATTRIBUTES <h2> - Section titles
Attributes provide additional information about elements <h3> - Sub-sections
Attributes are always specified in the start tag BIGGER HEADINGS
Attributes usually come in name/value pairs Each HTML heading has a default size. However, you can
like: name="value" specify the size for any heading with the style attribute,
using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
THE HREF ATTRIBUTE (LINK)
<a href="___ ">___</a>
THE SRC ATTRIBUTE (IMAGE) HTML PARAGRAPHS
<img src="__"> <p> paragraph.
Two ways to specify the URL in the src attribute: <hr> horizontal rule (thematic break in an HTML page, and is
most often displayed as a horizontal rule ; it has no end tag)
1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="[Link] <br> line break.
Notes: External images might be under copyright. You cannot control
external images; it can suddenly be removed or changed. <pre> preformatted text.
2. Relative URL - Links to an image that is hosted within the website. Here, (The text inside a <pre> element is displayed in a fixed-width font
the URL does not include the domain name. (usually Courier), and it preserves both spaces and line breaks)
If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg".
If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
THE STYLE ATTRIBUTE
<p style="color:__;">_____<p>
THE LANG ATTRIBUTE
<html lang="en-US">
THE TITLE ATTRIBUTE
<p title="I'm a tooltip">___</p>
NOTE : In some situations, when the attribute value itself
contains double quotes, it is necessary to use single quotes: