HTML Notes
Uploaded by
wakjirabacha31HTML Notes
Uploaded by
wakjirabacha31Web Development and Data Base Administration
HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
1 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
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, but with a forward slash inserted before the tag
name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
The browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is displayed in a
browser.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
2 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML is:
<!DOCTYPE html>
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences >
Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Ignore rich text commands in HTML
files".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
3 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).
You can use either .htm or .html as file extension. There is no difference, it is up to you.
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").
4 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
The result will look much like this:
5 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Basic Examples
Don't worry if these examples use tags you have not learned.
You will learn about them in the next chapters.
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
6 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
7 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in
between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
HTML elements with no content are called empty elements. Empty elements do not have an end
tag, such as the <br> element (which indicates a line break).
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
8 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Do Not Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
The example above works in all browsers, because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end
tag.
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
9 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if
you need to make your document readable by XML parsers, you must close all HTML elements
properly.
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.
HTML Attributes
Attributes provide additional information about HTML elements.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The lang Attribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search
engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
Example
10 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<p title="I'm a tooltip">
This is a paragraph.
</p>
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="https://www.w3schools.com">This is a link</a>
You will learn more about links and the <a> tag later in this tutorial.
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided
as attributes:
Example
<img src="w3schools.jpg" width="104" height="142">
The image size is specified in pixels: width="104" means 104 screen pixels wide.
You will learn more about images and the <img> tag later in this tutorial.
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.
W3C recommends lowercase in HTML, and demands lowercase for stricter document types
like XHTML.
We Suggest: Quote Attribute Values
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written as:
Example
<a href=https://www.w3schools.com>
11 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.
Sometimes it is necessary to use quotes. This example will not display the title attribute
correctly, because it contains a space:
Example
<p title=About W3Schools>
Using quotes are the most common. Omitting quotes can produce errors.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also
be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use
single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Chapter Summary
All HTML elements can have attributes
The title attribute provides additional "tool-tip" information
The href attribute provides address information for links
The width and height attributes provide size information for images
The alt attribute provides text for screen readers
At W3Schools we always use lowercase attribute names
At W3Schools we always quote attribute values with double quotes
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displayed
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
12 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Note: Browsers automatically add some white space (a margin) before and after a heading.
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document
structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less
important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
13 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<p>This is some other text.</p>
<hr>
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML
document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
Note: Metadata typically define the document title, character set, styles, links, scripts, and other
meta information.
HTML Tip - How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source"
(in IE), or similar in another browser. This will open a window containing the HTML code of the
page.
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their attributes.
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta
information, and more)
14 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
HTML Paragraphs
The HTML <p> element defines a paragraph:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Note: Browsers automatically add some white space (a margin) before and after a paragraph.
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML
code.
The browser will remove any extra spaces and extra lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of lines in the source code, but the browser ignores it. </p>
<p>
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
</p>
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph.
<p>This is another paragraph.
The example above will work in most browsers, but do not rely on it.
Note: Dropping the end tag can produce unexpected results or errors.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
15 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and their
attributes.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
Example
I am Red
I am Blue
16 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
I am Big
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
HTML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
The color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML Text Size
The font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
Example
17 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
18 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<strong>This text is strong</strong>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance.
Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the
meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means
that the text is "important".
19 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element
The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element
The HTML <del> element defines deleted (removed) text.
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
20 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
Note: Comments are not displayed by the browser, but they can help document your HTML
source code.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Comments are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors:
Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
HTML Colors
In HTML, a color can be specified by using a color name, an RGB value, or a HEX value.
Color Names
In HTML, a color can be specified by using a color name:
Example
Color Name
Red
Orange
Yellow
Cyan
21 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Blue
RGB Value
In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green,
blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the
others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255).
Experiment by mixing the RGB values below:
Red Green Blue
255 0 0
rgb(255, 0, 0)
Example
Color RGB
rgb(255,0,0)
rgb(255,255,0)
rgb(0,255,0)
rgb(0,255,255)
rgb(0,0,255)
Shades of gray are often defined using equal values for all the 3 light sources:
Example
Color RGB
22 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
rgb(0,0,0)
rgb(90,90,90)
rgb(128,128,128)
rgb(200,200,200)
rgb(255,255,255)
HEX Value
In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB,
where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as
decimal 0-255).
For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the
others are set to the lowest value (00).
Example
Color HEX
#FF0000
#FFFF00
#00FF00
#00FFFF
#0000FF
Shades of gray are often defined using equal values for all the 3 light sources:
Example
Color HEX
#000000
#404040
#808080
23 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
#CCCCCC
#FFFFFF
24 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Styles - CSS
CSS = Styles and Colors
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we
will use inline and internal styling, because this is easier to demonstrate, and easier for you to try
it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
25 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one
file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Fonts
26 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element:
Example
p{
border: 1px solid powderblue;
}
27 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
Example
p{
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p{
border: 1px solid powderblue;
margin: 50px;
}
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is used to select
one unique element!
The class Attribute
To define a style for a special type of elements, add a class attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
28 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
p.error {
color: red;
}
External References
External style sheets can be referenced with a full URL or with a path relative to the current web
page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web site:
Example
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as the current page:
Example
<link rel="stylesheet" href="styles.css">
Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
HTML Style Tags
Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
HTML Links - Hyperlinks
HTML links are hyperlinks.
29 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address (https://www.w3schools.com/html/) of the
link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a forward slash to the address, and then create a new
request.
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the default colors, by using styles:
Example
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
30 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is
default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image
(when the image is a link).
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
31 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the current web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML tutorial</a>
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text" style="width:width;height:height;">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason cannot view
it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
32 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers
A screen reader is a software program that reads the HTML code, converts the text, and allows
the user to "listen" to the content. Screen readers are useful for people who are blind, visually
impaired, or learning disabled.
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Alternatively, you can use the width and height attributes. Here, the values are specified in
pixels by default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Note: Always specify the width and height of an image. If width and height are not specified, the
page will flicker while the image loads.
Width and Height, or Style?
Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents internal or external styles sheets from
changing the original size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
33 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in
the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
You can read more about file paths in the chapter HTML File Paths.
Animated Images
The GIF standard allows animated images:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Note that the syntax of inserting animated images is no different from non-animated images.
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image
(when the image is a link).
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
34 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Image Maps
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates
a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-
map:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Chapter Summary
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
Use the HTML width and height attributes to define the size of the image
Use the CSS width and height properties to define the size of the image (alternatively)
Use the CSS float property to let the image float
Use the HTML <map> element to define an image-map
Use the HTML <area> element to define the clickable areas in the image-map
Use the HTML <img>'s element usemap attribute to point to an image-map
Note: Loading images takes time. Large images can slow down your page. Use images carefully.
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
35 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<area> Defines a clickable area inside an image-map
36 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
37 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
If you want the borders to collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
38 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
39 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
40 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Chapter Summary
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
41 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists
HTML List Example
An Unordered List: An Ordered List:
Item 1. First item
Item 2. Second item
Item 3. Third item
Item 4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
42 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<li>Milk</li>
</ul>
Example - Circle
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - None
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
43 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
44 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: List items can contain new list, and other HTML elements, like images and links, etc.
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
Example
45 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
46 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
</body>
</html>
Chapter Summary
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a list horizontally
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Head
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta
information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <title> Element
The <title> element defines the title of the document, and is required in all HTML/XHTML
documents.
47 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
The <title> element:
defines a title in the browser tab
provides a title for the page when it is added to favorites
displays a title for the page in search engine results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element is used to link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
The <meta> element is used to specify which character set is used, page description, keywords,
author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other
web services.
Define the character set used:
48 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the
<meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and will be
smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
Example
<script>
function myFunction {
49 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
The HTML <base> Element
The <base> element specifies the base URL and base target for all relative URLs in a page:
Example
<base href="https://www.w3schools.com/images/" target="_blank">
Omitting <html>, <head> and <body>?
According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.
The following code will validate as HTML5:
Example
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
50 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a
sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
HTML Layout Techniques
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
HTML tables
CSS float property
CSS framework
CSS flexbox
Which One to Choose?
HTML Tables
The <table> element was not designed to be a layout tool! The purpose of the <table> element is
to display tabular data. So, do not use tables for your page layout! They will bring a mess into
your code. And imagine how hard it will be to redesign your site after a couple of months.
Tip: Do NOT use tables for your page layout!
CSS Frameworks
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
CSS Floats
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you
just need to remember how the float and clear properties work. Disadvantages: Floating elements
are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS
Float and Clear chapter.
Float Example
City Gallery
London
Paris
Tokyo
51 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
CSS Flexbox
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices. Disadvantages: Does not work
in IE10 and earlier.
52 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Forms
HTML Form Example
First name:
Mickey
Last name:
Mouse
Submit
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons,
submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many
choices)
<input type="submit"> Defines a submit button (for submitting the form)
You will learn a lot more about input types later in this tutorial.
Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
53 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
54 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit
button.
In the example above, the form data is sent to a page on the server called "/action_page.php".
This page contains a server-side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data:
<form action="/action_page.php" method="get">
or:
<form action="/action_page.php" method="post">
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Note: GET must NOT be used when sending sensitive information! GET is best suited for short,
non-sensitive, amounts of data, because it has size limitations too.
When to Use POST?
55 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Always use POST if the form data contains sensitive or personal information. The POST method
does not display the submitted form data in the page address field.
POST has no size limitations, and can be used to send large amounts of data.
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
This is how the HTML code above will be displayed in a browser:
Personal information:First name:
Mickey
Last name:
56 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Mouse
Submit
Here is the list of <form> attributes:
Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting
page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage:
document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).
HTML Form Elements
This chapter describes all HTML form elements.
The <input> Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
The <select> Element
The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
57 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Example
<option value="fiat" selected>Fiat</option>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:
Click Me!
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
<keygen>
<output>
Note: Browsers do not display unknown elements. New elements that are not supported in older
browsers will not "destroy" your web page.
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
58 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML5 <keygen> Element
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> element specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server.
The public key could be used to generate a client certificate to authenticate the user in the future.
Example
A form with a keygen field:
<form action="/action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an <output> element:
59 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
HTML Input Types
This chapter describes the different input types for the <input> element.
Input Type Text
<input type="text"> defines a one-line text input field:
Example
60 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
This is how the HTML code above will be displayed in a browser:
User name:
User password:
The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
61 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit
If you omit the submit button's value attribute, the button will get a default text:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default
values:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
62 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<input type="reset">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit Reset
If you change the input values and then click the "Reset" button, the form-data will be reset to
the default values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
63 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:
HTML5 Input Types
HTML5 added several new input types:
color range
date search
datetime-local tel
email time
month url
number week
New input types that are not supported by older web browsers, will behave as <input
type="text">.
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
64 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<form>
Birthday:
<input type="date" name="bday">
</form>
You can also add restrictions to dates:
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard to match email
input.
Example
<form>
E-mail:
65 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
<input type="email" name="email">
</form>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
Disabled Specifies that an input field should be disabled
Max Specifies the maximum value for an input field
Maxlength Specifies the maximum number of character for an input field
Min Specifies the minimum value for an input field
Pattern Specifies a regular expression to check the input value against
Readonly Specifies that an input field is read only (cannot be changed)
Required Specifies that an input field is required (must be filled out)
Size Specifies the width (in characters) of an input field
66 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Step Specifies the legal number intervals for an input field
Value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to
100, in steps of 10. The default value is 30:
Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100. However, you can set restrictions on
what numbers are accepted with the min, max, and step attributes:
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.
67 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>
68 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
HTML Input Type Attribute
Tag Description
<input type=""> Specifies the input type to display
HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors and fonts, and images!
Audio, video, and animation have been handled differently by the major browsers. Different
formats have been supported, and some formats require extra helper programs (plug-ins) to
work.
Hopefully this will become history. HTML5 multimedia promises an easier future for
multimedia.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv,
and .avi.
Common Video Formats
MP4 is the new and upcoming format for internet video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.
69 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first
.mpeg popular video format on the web. Used to be supported by all browsers,
but it is not supported in HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and
TV hardware. Plays well on Apple computers, but not in web browsers.
(See MP4)
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low
.ram bandwidths. It is still used for online video and Internet TV, but does not
play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra component
.flv (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by
HTML5.
WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and
Google. Supported by HTML5.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on
or MP4 QuickTime. Commonly used in newer video cameras and TV hardware.
Supported by all HTML5 browsers. Recommended by YouTube.
Only MP4, WebM, and Ogg video are supported by the HTML5 standard.
Audio Formats
MP3 is the newest format for compressed recorded music. The term MP3 has become
synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
70 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
.midi electronic music devices like synthesizers and PC sound cards. MIDI
files do not contain sound, but digital notes that can be played by
electronics. Plays well on all computers and music hardware, but not in
web browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with
.ram low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly
used in music players. Plays well on Windows computers, but not in web
browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the
upcoming video format on the internet. This leads to automatic support
for MP4 audio by all browsers.
Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.
Playing Videos in HTML
Before HTML5, a video could only be played in a browser with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page.
Browser Support
The numbers in the table specify the first browser version that fully supports the <video>
element.
Element
<video> 4.0 9.0 3.5 4.0 10.5
The HTML <video> Element
71 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set,
the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
HTML <video> Autoplay
To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML Video - Browser Support
In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
The browser support for the different formats is:
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES
HTML Video - Media Types
72 | By: Tolera Gudisa 2017 E.C
Web Development and Data Base Administration
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML Video - Methods, Properties, and Events
HTML5 defines DOM methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
HTML5 Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video>
and <audio>
<track> Defines text tracks in media players
73 | By: Tolera Gudisa 2017 E.C
You might also like
- Write HTML Using Notepad or Textedit: ExampleNo ratings yetWrite HTML Using Notepad or Textedit: Example23 pages
- Editors: Write HTML Using Notepad or TexteditNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pages
- HTML Is The Standard Markup Language For Creating Web PagesNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages12 pages
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pages
- HTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web DesignFrom EverandHTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web Design4/5 (1)
- Assingment ON Ethical and Psychosocial Issues in Genetic TestingNo ratings yetAssingment ON Ethical and Psychosocial Issues in Genetic Testing17 pages
- The Business Plan: Creating and Starting The Venture: Hisrich Peters ShepherdNo ratings yetThe Business Plan: Creating and Starting The Venture: Hisrich Peters Shepherd40 pages
- Complete Download (Ebook) Retranslation through the Centuries: Jules Verne in English (New Trends in Translation Studies) by Kieran O'Driscoll ISBN 9783034302364, 3034302363 PDF All Chapters100% (4)Complete Download (Ebook) Retranslation through the Centuries: Jules Verne in English (New Trends in Translation Studies) by Kieran O'Driscoll ISBN 9783034302364, 3034302363 PDF All Chapters76 pages
- Presented by - R Hemamalini 2010CYZ8795 Group G1100% (1)Presented by - R Hemamalini 2010CYZ8795 Group G129 pages
- 2021-07-29 6102ebf67a512 GenderontheEdgeTransgenderGayandOtherPacificIslandersbyNikoBesnierz-lib - Org PDF100% (1)2021-07-29 6102ebf67a512 GenderontheEdgeTransgenderGayandOtherPacificIslandersbyNikoBesnierz-lib - Org PDF386 pages
- Intelligent Waste Disposal Robot Featuring Garbage Level Detection and Cloud Connectivity_Literature surveryNo ratings yetIntelligent Waste Disposal Robot Featuring Garbage Level Detection and Cloud Connectivity_Literature survery2 pages
- DS-ZF - 400 - A Gear Box For Volvo Penta d13No ratings yetDS-ZF - 400 - A Gear Box For Volvo Penta d134 pages
- 13 Advocacy Strategies For Running A Successful Campaign - VoterVoiceNo ratings yet13 Advocacy Strategies For Running A Successful Campaign - VoterVoice29 pages
- Cisco CUCM CLI Useful Commands Cheat SheetNo ratings yetCisco CUCM CLI Useful Commands Cheat Sheet2 pages
- Review On Mobile Application For Medicine ReminderNo ratings yetReview On Mobile Application For Medicine Reminder3 pages
