1-learning-basic-html-intro-to-web-development.pdf

1. learning Basic HTML - intro to web development
Internal medicine ( Davao Medical School Foundation )
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
1. learning Basic HTML - intro to web development
Internal medicine ( Davao Medical School Foundation )
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Mohamed Palastine (palastinearabia@gmail.com)
lOMoARcPSD|48244870

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>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE 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:
<!DOCTYPE html>
<html lang="en">
<head>
HTML BASIC
lOMoARcPSD|48244870

</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="https://www.NEMSUcantilan.com">This is a link</a>
</body>
</html>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
lOMoARcPSD|48244870

You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<img src="nemsu.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
Note: the image file should be in the same file directory.
How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.
lOMoARcPSD|48244870

An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!
HTML Elements
lOMoARcPSD|48244870

</html>
Example Explained
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:
<body>
</body>
The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
<!DOCTYPE html>
<html lang="en">
<head>
lOMoARcPSD|48244870

</head>
<body>
<h1>My First Heading
<p>My first paragraph.
</body>
</html>
However, never rely on this! Unexpected results and errors may occur if
you forget the end tag!
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing
tag:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
HTML Tag Reference
lOMoARcPSD|48244870

HTML attributes provide additional information about HTML elements.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
<body>
<a href="https://www.NEMSU.gov.ph">Visit NEMSU</a>
</body>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
<body>
<img src="nemsu.jpg">
</body>
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. 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".
Tip: It is almost always best to use relative URLs. They will not break if you
change domain.
HTML Attributes
lOMoARcPSD|48244870

The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify
the width and height of the image (in pixels):
<body>
<img src="nemsu.jpg" width="500" height="600">
</body>
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute, or if the user uses a screen
reader.
<body>
<img src="nemsu.jpg" width="500" height="600" alt="Girl with a jacket">
</body>
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size,
and more.
<body>
<p style="color:red;">This is a red paragraph.</p>
</body>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
lOMoARcPSD|48244870

</body>
</html>
Country codes can also be added to the language code in the lang attribute. So,
the first two characters define the language of the HTML page, and the last two
characters define the country.
The following example specifies English as the language and United States as
the country:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse
over the element:
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
</body>
Chapter Summary
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color,
font, size, and more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an element
lOMoARcPSD|48244870

HTML headings are titles or subtitles that you want to display on a webpage.
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
HTML Headings
Note: Browsers automatically add some white space (a margin) before and after a
heading.
lOMoARcPSD|48244870

Headings Are Important
Search engines use the headings to index the structure and content of your web
pages.
Users often skim a page 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.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the
font-size property.</p>
</body>
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
lOMoARcPSD|48244870

A paragraph always starts on a new line, and is usually a block of text.
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
<body>
</body>
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 display by adding extra spaces or extra lines
in your HTML code.
The browser will automatically remove any extra spaces and lines when the
page is displayed:
<body>
<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>
<p>
HTML Paragraph
lOMoARcPSD|48244870

The number of lines in a paragraph depends on the size of the browser
window. If you resize the browser window, the number of lines in this paragraph
will change.
</p>
</body>
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:
<body>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
</body>
The <hr> tag is an empty tag, which means that it has no end tag.
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:
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
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:
<body>
<p>In HTML, spaces and new lines are ignored:</p>
lOMoARcPSD|48244870

<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>
</body>
Solution - 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:
<body>
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</pre>
</body>
HTML Tag Reference
lOMoARcPSD|48244870

The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
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.
Background Color
The CSS background-color property defines the background color for an HTML
element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</body>
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
HTML Styles
lOMoARcPSD|48244870

Text Color
The CSS color property defines the text color for an HTML element:
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
Text Size
The CSS font-size property defines the text size for an HTML element:
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
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
lOMoARcPSD|48244870

HTML contains several elements for defining text with a special meaning.
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasis</em></p>
<p><mark>This text is marked text</mark></p>
<p><small>This text is smaller Text</small></p>
<p><del> This text is is deleted text</del></p>
<p><ins>This text is inserted text</ins></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
HTML Formatting Elements
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> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Text Formatting
lOMoARcPSD|48244870

In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
</body>
HTML Quotation and Citation
Elements
lOMoARcPSD|48244870

HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation
systems and search-engines.
Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>Marking up abbreviations can give useful information to browsers,
translation systems and search-engines.</p>
</body>
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner of
a document or an article.
The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.
<body>
<p>The HTML address element defines contact information (author/owner) of a
document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
lOMoARcPSD|48244870

HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="nemsu.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
<body>
<p>If your browser supports bi-directional override (bdo), the next line will
be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
HTML Quotation and Citation Elements
lOMoARcPSD|48244870

HTML comments are not displayed in the browser, but they can help document your
HTML source code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

<body>


</body>
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
<body>

<p>This is a paragraph too.</p>
</body>
Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors.
Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors.
<body>
<p>This  is a paragraph.</p>
</body>
HTML Comments
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
lOMoARcPSD|48244870

HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
<body>
<h1 style="background-color:Tomato;"><center>Tomato</center></h1>
<h1 style="background-color:Orange;"><center>Orange</center></h1>
<h1 style="background-color:DodgerBlue;"><center>DodgerBlue</center></h1>
<h1 style="background-
color:MediumSeaGreen;"><center>MediumSeaGreen</center></h1>
<h1 style="background-color:Gray;"><center>Gray</center></h1>
<h1 style="background-color:SlateBlue;"><center>SlateBlue</center></h1>
<h1 style="background-color:Violet;"><center>Violet</center></h1>
<h1 style="background-color:LightGray;"><center>LightGray</center></h1>
</body>
HTML Color Names
lOMoARcPSD|48244870

Background Color
You can set the background color for HTML elements:
Example:
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
Output:
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
lOMoARcPSD|48244870

Output:
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</body>
Border Color
You can set the color of borders:
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB,
HEX, and HSL values:
lOMoARcPSD|48244870

The following two <div> elements have their background color set with RGBA
and HSLA values, which add an Alpha channel to the color (here we have 50%
transparency):
Example:
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB,
HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
lOMoARcPSD|48244870

CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all
at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
HTML Styles - CSS
Tip: The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the body
text to "blue", all headings, paragraphs, and other text elements within the body will
also get the same color (unless you specify something else)!
lOMoARcPSD|48244870

Using CSS
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, 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.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
Example:
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
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.
The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
lOMoARcPSD|48244870

Example:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:
Example:
<!DOCTYPE html>
<html lang="en-US">
<head>

<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
lOMoARcPSD|48244870

The 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 what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.
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
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html lang="en-US">
<head>
Tip: With an external style sheet, you can change the look of an entire web site, by
changing one file!
lOMoARcPSD|48244870

</body>
</html>
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
p {
padding: 30px;
}
</style>
</head>
<body>
</body>
</html>
CSS Margin
The CSS margin property defines a margin (space) outside the border.
<!DOCTYPE html>
<html lang="en-US">
<head>
lOMoARcPSD|48244870

An HTML link is displayed in a different color depending on whether it has been
visited, is unvisited, or is active.
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 link state colors, by using CSS:
HTML Links – Different Colors
Example
Here, an unvisited link will be green with no underline. A visited link will be pink
with no underline. An active link will be yellow and underlined. In addition, when
mousing over a link (a:hover) it will become red and underlined:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
}
</style>
lOMoARcPSD|48244870

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
a:link {
color: green;
/* background-color: green; */
}
a:visited {
color: pink;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="#">HTML Images</a>
</body>
</html>
Link Buttons
A link can also be styled as a button, by using CSS:
lOMoARcPSD|48244870

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="#">This is a link</a>
</body>
</html>
lOMoARcPSD|48244870

HTML links can be used to create bookmarks, so that readers can jump to specific
parts of a web page.
Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the
bookmark.
Example
First, use the id attribute to create a bookmark:
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
Example
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>
<h2>Chapter 5</h2>
HTML Links – Create Bookmarks
<a href="#C4">Jump to Chapter 4</a>
lOMoARcPSD|48244870

<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
<h2>Chapter 18</h2>
<h2>Chapter 19</h2>
<h2>Chapter 20</h2>
<h2>Chapter 21</h2>
<h2>Chapter 22</h2>
<h2>Chapter 23</h2>
</body>
lOMoARcPSD|48244870

Chapter Summary
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark
lOMoARcPSD|48244870

Images can improve the design and the appearance of a web page.
Image tags and its attribute:
<body>
<h2>HTML Image</h2>
<img src="NEMSU.jpg" alt="Trulli" width="500" height="333">
</body>
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="NEMSU" alt="School campus" style="width:500px;height:600px;">
HTML Images
lOMoARcPSD|48244870

Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:
<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>
Common Image Formats
Here are the most common image file types, which are supported in all
browsers (Chrome, Edge, Firefox, Safari, Opera):
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 or the
CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the
right
lOMoARcPSD|48244870

With HTML image maps, you can create clickable areas on an image.
Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:
<body>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
</body>
HTML Image Maps
lOMoARcPSD|48244870

How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other images
is that you must add a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.
Tip: You can use any image as an image map!
Chapter Summary
• 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 usemap attribute of the <img> element to point to an image
map
lOMoARcPSD|48244870

favicon is a small image displayed next to the page title in the browser tab.
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own
favicon on sites like https://www.favicon.cc.
Tip: A favicon is a small image, so it should be a simple image with high
contrast.
To add a favicon to your website, either save your favicon image to the root
directory of your webserver, or create a folder in the root directory called
images, and save your favicon image in this folder. A common name for a
favicon image is "favicon.ico".
Next, add a <link> element to your "index.html" file, after the <title> element,
like this:
<!DOCTYPE html>
<html lang="en-US">
<head>

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
HTML Favicon
lOMoARcPSD|48244870

HTML tables allow web developers to arrange data into rows and columns.
Example:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
HTML Tables
lOMoARcPSD|48244870

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Note: table data elements are the data containers of the table. They can
contain all sorts of HTML elements: text, images, lists, other tables, etc.
lOMoARcPSD|48244870

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
You can have as many rows as you like in a table; just make sure that the
number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another.
You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be headers. In those cases use the <th> tag
instead of the <td> tag:
Table Headers
Sometimes you want your cells to be headers. In those cases use the <th> tag
instead of the <td> tag:
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the table.</p>
</body>
lOMoARcPSD|48244870

HTML Table Borders
HTML tables can have borders of different styles and shapes.
How To Add a Border
When you add a border to a table, you also add borders around each table cell:
To add a border, use the CSS border property on table, th, and td elements:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
lOMoARcPSD|48244870

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.
This will make the borders collapse into a single border:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table, th, td {
}
</style>
</head>
<body>
lOMoARcPSD|48244870

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Style Table Borders
If you set a background color of each cell, and give the border a white color (the
same as the document background), you get the impression of an invisible
border:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table, th, td {
}
th, td {
background-color: #96D4D4;
}
</style>
lOMoARcPSD|48244870

</head>
<body>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Round Table Borders
With the border-radius property, the borders get rounded corners:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table, th, td {
lOMoARcPSD|48244870

}
th, td {
background-color: #96D4D4;
border-radius: 10px;
}
</style>
</head>
<body>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Skip the border around the table by leaving out table from the css selector:
<!DOCTYPE html>
<html lang="en-US">
<head>
lOMoARcPSD|48244870

<style>
th, td {
border-radius: 10px;
}
</style>
</head>
<body>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
lOMoARcPSD|48244870

Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
Example:
th, td {
border-style: dotted;
}
Border Color
With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}
lOMoARcPSD|48244870

HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire
table.
Use the style attribute with the width or height properties to specify the size of a
table, row or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
<body>
<h2>100% wide HTML Table</h2>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
lOMoARcPSD|48244870

HTML Table Column Width
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
Example
Set the width of the first column to 70%:
<body>
<h2>Set the first column to 70% of the table width</h2>
<tr>
<th style="width:70%">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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
lOMoARcPSD|48244870

HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row
element:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<h2>Set the height of the second row to 200 pixels</h2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
lOMoARcPSD|48244870

HTML lists allow web developers to group a set of related items in lists.
Example:
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
HTML Lists
An unordered HTML list:
• Coffee
• Tea
• Milk
An ordered HTML list:
1. Coffee
2. Tea
3. Milk
lOMoARcPSD|48244870

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:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.
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:
<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. It can have one of the following values:
See the html tags below:
<body>
lOMoARcPSD|48244870

<ul style="list-style-type:disc;"">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul style="list-style-type:square;"">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
Lists can be nested (list inside list):
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.
lOMoARcPSD|48244870

Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
<!DOCTYPE html>
<html lang="en-US">
<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;
}
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>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a
navigation menu:</p>
</body>
</html>
lOMoARcPSD|48244870

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:
A Description List
Coffee
- black hot drink
Milk
- white cold drink
HTML tags shown below:
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
lOMoARcPSD|48244870

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 <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
• Use the CSS property float:left to display a list horizontally
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
<body>
<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start
attribute to start counting from a specified number:</p>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
lOMoARcPSD|48244870

Nested HTML Lists
Lists can be nested (list inside list):
<body>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.
Chapter Summary
• 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
• Lists can be nested
• List items can contain other HTML elements
lOMoARcPSD|48244870

Every HTML element has a default display value, depending on what type of
element it is.
There are two display values: block and inline.
Block-level Elements
A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to
the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element
Html tags shown below:
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always
start on a new line and take up the full width available (stretches out to the
left and right as far as it can).</p>
</body>
HTML Block and Inline Elements
lOMoARcPSD|48244870

Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello
World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and
only takes up as much width as necessary.</p>
</body>
Note: An inline element cannot contain a block-level element!
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <div> element can be used to style blocks of
content:
<!DOCTYPE html>
<html lang="en-US">
<head>

<style>
#backgrd{
background-color: black;
color: white;
padding: 20px;
}
lOMoARcPSD|48244870

</style>
</head>
<body>
<div id="backgrd">
<h2>London</h2>
<p>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.</p>
<p>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.</p>
</div>
</body>
</html>
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a
part of a document.
The <span> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <span> element can be used to style parts of
the text:
<p>My mother has <span style="color:blue;font-
weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
Chapter Summary
• There are two display values: block and inline
• A block-level element always starts on a new line and takes up the full
width available
• An inline element does not start on a new line and it only takes up as
much width as necessary
• The <div> element is a block-level and is often used as a container for
other HTML elements
• The <span> element is an inline container used to mark up a part of a text,
or a part of a document
lOMoARcPSD|48244870

1-learning-basic-html-intro-to-web-development.pdf

More Related Content

Similar to 1-learning-basic-html-intro-to-web-development.pdf (20)

Recently uploaded (20)

1-learning-basic-html-intro-to-web-development.pdf