0% found this document useful (0 votes)

24 views

Lesson 10 - Develop Responsive Web Design

web dev

Uploaded by

Dhoy Navarro

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

24 views

Lesson 10 - Develop Responsive Web Design

web dev

Uploaded by

Dhoy Navarro

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 167

age 1 of 167

Lesson 10 – Develop Responsive Web Design (Part 4)

Objectives:
1. Perform slicing of mockups.
2. Apply to slice images in Photoshop.
3. Create a webpage using HTML.
4. Create a navigation bar on your website.
5. Add web content on your design.
6. Validate HTML/CSS base on W3C standard.
7. Utilize FTP program.

Content:

Slicing of mockups are performed

Slicing Images with Photoshop CS6 | PSD to HTML

If you have exported or saved several images in Photoshop that are in the same artboard you know that
it’s tedious to save each image separately. You have to Save As and then name your file, then choose
the folder you want to save the image into. Well, that’s ok but what if you had more than a few images
and you had to save each one separately? There is a trick to do that. I’ll show you how below.

The Slicing Tool

If you are new to exporting assets for the web or exporting several images from an artboard in
Photoshop this tutorial should help you achieve just that. Here are the steps on how to export assets
from Photoshop. I’ll assume you already have a design or layout with several images that you want to
export but don’t want to export them one by one.

Introduction

Slicing is a fairly easy tool to use and in this quick tutorial we are going to slice up an image and export
the slices and HTML to Dreamweaver.
age 2 of 167

Create Our Image

Firstly, we need to open Adobe Photoshop and create our image.

Time to Slice

Then We are to select the Slice tool, click and hold. There is also 2 slice tools, Slice tool is to create new
slices and Slice select tool is to edit and transform created slices. You will be going back and forth
between them. Follow the example to create your slices and then check the next picture.
age 3 of 167

Exporting Image Slices and HTML

We are happy with our slices and now we are ready to export, this is also something I did not figure out
as fast as I wanted but make sure you select save for web... as this will give you the functions to save
each slice into its own image and also export the HTML out of it too into a table.

This new window is your new friend is slicing, I have added 2 arrows to this example. Left arrow marked
open in HTML will slice and preview your slices in a default browser and under it will be the HTML
source code. Keep this open or copy it into Dreamweaver then back to photoshop and click save which
will export your slices to a selected folder. My suggestion would be for web sites is root:/images/
age 4 of 167

Congrats you have just sliced up the template.

When making lots of slices you’re going to run into times where you have made a mistake, all slices must
be accurate by the pixel. When checking your HTML code if your images are not a clean layout and there
is spacers, you have misaligned something somewhere. Best advice is to keep slices in perfect alignment
and if needed use multiple tables.

To continue setting up...

Note: if you’re /image/ folder has another /image/ folder in it means you manually made the folder and
went and saved into it, should select the root of your directory to save time and keep things clean.

Open Dreamweaver back up and set your working directory up to the root of where you’re working,
open your index in root:/index.html add "align=center" to the table to get it in the middle then click
design view. You can see the outlay of your template and going from left to right click on the order of
your images and using the drag and drop function for the directory file.
age 5 of 167

Once all 3 images have been directed to each image in the HTML you can assign a hyperlink to the
bottom 2 images and use them as links into other sections of the web site.

HTML pages are created

HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.

A Simple HTML Document

NOTE: You may use any text editor in making an HTML document. For the duration of the lesson we will
be using Notepad and VSCode.

Example:
age 6 of 167

<!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 that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content En

<h1> My First Heading </

<p> My first paragraph. </

age 7 of 167

<br> none no

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!

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display
them correctly.

A 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:

age 8 of 167

Note: The content inside the <body> section will be displayed in a browser. The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.

HTML Editors

Learn 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 that using a simple text editor is a good way to learn HTML.

Follow the 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

age 9 of 167

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 "Display HTML files as HTML code instead of
formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!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.
age 10 of 167

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML
files).

Tip: 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").

The result will look much like this:

HTML Basic Examples

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>.
age 11 of 167

Example

<!DOCTYPE html>
<html>
<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:

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>
<body>

<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>

</body>
</html>
age 12 of 167

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
age 13 of 167

HTML Links
HTML links are defined with the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.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.

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:
age 14 of 167

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104"

height="142">

</body>
</html>

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new
tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of
(you will see 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.
age 15 of 167

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

<!DOCTYPE html>
<html>
<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>
</html>

Background Color

The CSS background-color property defines the background color for an HTML element.

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
age 16 of 167

Set background color for two different elements:

Text Color
The CSS color property defines the text color for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
age 17 of 167

Fonts

The CSS font-family property defines the font to be used for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>
age 18 of 167

Text Size

The CSS font-size property defines the text size for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>
age 19 of 167

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This text is bold

This text is italic

This is subscript and superscript

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
age 20 of 167

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>
</html>
age 21 of 167

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically
displayed in italic.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>
age 22 of 167

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

HTML <small> Element

The HTML <small> element defines smaller text:

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>

<p><small>This is some smaller text.</small></p>

</body>
</html>
age 23 of 167

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>
age 24 of 167

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually
underline inserted text:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>
age 25 of 167

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>
age 26 of 167

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like
WWW[1]:

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

HTML Colors

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:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
age 27 of 167

HTML supports 140 standard color names.

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.

<!DOCTYPE html>
<html>
<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>
</html>

Border Color

You can set the color of borders:

age 28 of 167

Hello World
Hello World
Hello World
<!DOCTYPE html>
<html>
<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>
</html>

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:
age 29 of 167

rgb(255, 99, 71)

#ff6347
hsl(9, 100%, 64%)

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):

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<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>
</html>
age 30 of 167

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can 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 with a value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other
two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and
the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

</body>
</html>
age 31 of 167

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

</body>
</html>
age 32 of 167

RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the
opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>

</body>
</html>
age 33 of 167

HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color.

HEX Color Values

In HTML, a color can 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 other two
(green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the
other two (red and blue) are set to 00.

display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
age 34 of 167

</body>
</html>

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

</body>
</html>
age 35 of 167

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

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. A link can be an image or any other HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

<!DOCTYPE html>
<html>
<body>
age 36 of 167

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>
</html>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must
specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
age 37 of 167

<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the
"https://www" part):

<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
age 38 of 167

<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

</body>
</html>
age 39 of 167

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them
send a new email):

<!DOCTYPE html>
<html>
<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto:
inside the href attribute:</p>

<p><a href="mailto:[email protected]">Send email</a></p>

</body>
</html>
age 40 of 167

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

<!DOCTYPE html>
<html>
<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the HTML tutorial.</p>

<button onclick="document.location='https://www.w3schools.com/'">HTML Tutorial</button>

</body>
</html>
age 41 of 167

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as
a tooltip text when the mouse moves over the element.

<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>

<p>The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.</p>

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML

Tutorial</a>

</body>
</html>
age 42 of 167

HTML Links - Different Colors

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:

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:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
age 43 of 167

}
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>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a>

</body>
</html>
age 44 of 167

Link Buttons

a:hover, a:active {
background-color: blue;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>
age 45 of 167

HTML Images

Images can improve the design and the appearance of a web page.

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

Syntax

<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server
and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in
relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and
the alt text are shown if the browser cannot find the image.

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image get an
understanding of what the image contains:</p>

</body>
</html>
age 46 of 167

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="https://image.cdn2.seaart.ai/2023-08-
23/15151857176436741/78a47d5ed48bb54c374f5b35368e9903966726ab_high.webp" alt="Girl in a
jacket" style="width:500px;height:600px;">
</body>
</html>
age 47 of 167

HTML Background Images

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-
image property:

Example

Add a background image on a HTML element:

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a p element:</p>

<p style="background-image: url('https://image.cdn2.seaart.ai/2023-08-

23/15151857176436741/78a47d5ed48bb54c374f5b35368e9903966726ab_high.webp');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>
age 48 of 167

You can also specify the background image in the <style> element, in the <head> section:

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>

for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>
age 49 of 167

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on
the <body> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://image.cdn2.seaart.ai/2023-08-
23/15151857176436741/78a47d5ed48bb54c374f5b35368e9903966726ab_high.webp');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is
specified, in this case the body element.</p>

</body>
</html>
age 50 of 167

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
<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>
</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>
</html>
age 51 of 167

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How to Add a Border?

To add a border, use the CSS border property on table, th, and td elements:

<!DOCTYPE html>
<html>
<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>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
age 52 of 167

<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.
age 53 of 167

This will make the borders collapse into a single border:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
age 54 of 167

</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>
<head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
age 55 of 167

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the cells to make the impression of
invisible borders.</p>

</body>
</html>
age 56 of 167

Round Table Borders

With the border-radius property, the borders get rounded corners:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>

<h2>Table With Rounded Borders</h2>

<p>Use the CSS border-radius property to add rounded corners to the borders.</p>

</body>
</html>
age 57 of 167

Skip the border around the table by leaving out table from the css selector:

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>

<h2>Table With Rounded Borders</h2>

<p>Use the CSS border-radius property to add rounded corners to the table cells.</p>

<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>
age 58 of 167

<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

 Item
 Item
 Item
 Item
age 59 of 167

An ordered HTML list:

1. First item
2. Second item
3. Third 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:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
age 60 of 167

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:

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
age 61 of 167

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:

<!DOCTYPE html>
<html>
<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>
</html>
age 62 of 167

CSS are created

CSS Introduction

CSS is the language we use to style a Web page.

What is 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
 External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

CSS Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>
</html>
age 63 of 167

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information were
added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS Syntax

A CSS rule consists of a selector and a declaration block.

age 64 of 167

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>
age 65 of 167

Example Explained

 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>

</body>
</html>
age 66 of 167

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>
</html>
age 67 of 167

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>
age 68 of 167

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>
age 69 of 167

HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to class="center" and to class="large":

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

</body>
</html>
age 70 of 167

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

</body>
</html>
age 71 of 167

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:
age 72 of 167

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

How to Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in
the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS
age 73 of 167

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.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, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
age 74 of 167

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
age 75 of 167

Inline CSS

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

<!DOCTYPE html>
<html>
<head>
age 76 of 167

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

HTML and CSS Comments

From the HTML tutorial, you learned that you can add comments to your HTML source by using
the  syntax.

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red; /* Set text color to red */
}
</style>
</head>
age 77 of 167

<body>

<h2>My Heading</h2>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

age 78 of 167

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

With CSS, a color is most often specified by:

 a valid color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:
age 79 of 167

Example

Here, the <h1>, <p>, and <div> elements will have different background colors:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>
age 80 of 167

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0.
The lower value, the more transparent:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}

div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its
child elements become transparent as well. This can make the text inside a fully transparent element
hard to read:</p>

<div class="first">
<h1>opacity 0.1</h1>
</div>

<div class="second">
<h1>opacity 0.3</h1>
</div>

<div class="third">
<h1>opacity 0.6</h1>
</div>

<div>
<h1>opacity 1 (default)</h1>
age 81 of 167

</div>

</body>
</html>

Note: When using the opacity property to add transparency to the background of an element, all of its
child elements inherit the same transparency. This can make the text inside a fully transparent element
hard to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you
can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number
between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}

div.first {
age 82 of 167

background: rgba(0, 128, 0, 0.1);

}

div.second {
background: rgba(0, 128, 0, 0.3);
}

div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>

<div>
<h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
<h1>10% opacity</h1>
</div>

<div class="second">
<h1>30% opacity</h1>
</div>

<div class="third">
<h1>60% opacity</h1>
</div>
age 83 of 167

<div>
<h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity
property.</p>

</body>
</html>

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example

Set the background image for a page:

<!DOCTYPE html>
<html>
<head>
age 84 of 167

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Note: When using a background image, use an image that does not disturb the text.

The background image can also be set for specific elements, like the <p>
element:

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("https://unblast.com/wp-content/uploads/2020/05/Light-Wood-Background-
Texture-1536x1024.jpg");
}
</style>
</head>
<body>
age 85 of 167

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

<!DOCTYPE html>
<html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>
age 86 of 167

In addition, links can be styled differently depending on what state they are in.

The four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
age 87 of 167

}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

When setting the style for several link states, there are some order rules:

 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
</head>
<body>

<h2>Styling a link with text-decoration property</h2>

age 88 of 167

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to
display links as boxes/buttons:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
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>

</body>
</html>
age 89 of 167

Example

a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>
age 90 of 167

CSS Lists

Unordered Lists:

o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Ordered Lists:

1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

age 91 of 167

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
age 92 of 167

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>
age 93 of 167

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).
age 94 of 167

"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each
line of a list item will be aligned vertically. This is default:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list
item, it will be part of the text and push the text at the start:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>

<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from
the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves
of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers
to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from
the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves
of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
age 95 of 167

<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers
to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

Styling List with Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will
affect the individual list items:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
age 96 of 167

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>
age 97 of 167

CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.

The display Property

The display property is used to specify how an element is shown on a web page.

Every HTML element has a default display value, depending on what type of element it is. The default
display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.

Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to
the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
age 98 of 167

 <footer>
 <section>

Inline Elements

An inline element DOES NOT start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>

The display Property Values

The display property has many values:

Value Description

inline Displays an element as an inline element

block Displays an element as a block element

contents Makes the container disappear, making the child elements children of the element
the next level up in the DOM

flex Displays an element as a block-level flex container

grid Displays an element as a block-level grid container

inline-block Displays an element as an inline-level block container. The element itself is formatted
as an inline element, but you can apply height and width values

inline-flex Displays an element as an inline-level flex container

inline-grid Displays an element as an inline-level grid container

inline-table The element is displayed as an inline-level table

list-item Let the element behave like a <li> element

run-in Displays an element as either block or inline, depending on context

table Let the element behave like a <table> element

age 99 of 167

table-caption Let the element behave like a <caption> element

table-column- Let the element behave like a <colgroup> element

group

table-header- Let the element behave like a <thead> element

group

table-footer-group Let the element behave like a <tfoot> element

table-row-group Let the element behave like a <tbody> element

table-cell Let the element behave like a <td> element

table-column Let the element behave like a <col> element

table-row Let the element behave like a <tr> element

none The element is completely removed

initial Sets this property to its default value

inherit Inherits this property from its parent element

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and
recreating them. Take a look at our last example on this page if you want to know how this can be
achieved.

The <script> element uses display: none; as default.

Override the Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a
specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
age 100 of 167

</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Note: Setting the display property of an element only changes how the element is displayed, NOT what
kind of element it is. So, an inline element with display: block; is not allowed to have other block
elements inside it.

The following example displays <span> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
age 101 of 167

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break
between each span elements.</span>

</body>
</html>

The following example displays <a> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
a{
display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>

<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>
age 102 of 167

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

CSS border-radius Property

The CSS border-radius property defines the radius of an element's corners.

Tip: This property allows you to add rounded corners to elements!

Here are three examples:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
age 103 of 167

background: url(https://unblast.com/wp-content/uploads/2020/05/Light-Wood-Background-Texture-
1536x1024.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>
age 104 of 167

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-
top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

CSS border-radius - Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value
applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to
bottom-left corner):

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value
applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the
second value applies to top-right and bottom-left corners):

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
age 105 of 167

height: 150px;
}

#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>

<p>Three values - border-radius: 15px 50px 30px:</p>

<p>Two values - border-radius: 15px 50px:</p>

<p>One value - border-radius: 15px:</p>

</body>
</html>
age 106 of 167

You could also create elliptical corners:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px / 50px;
age 107 of 167

background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Elliptical border - border-radius: 50px / 15px:</p>

<p>Elliptical border - border-radius: 15px / 50px:</p>

<p>Ellipse border - border-radius: 50%:</p>

</body>
</html>
age 108 of 167

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

 Linear Gradients (goes down/up/left/right/diagonally)

 Radial Gradients (defined by their center)
 Conic Gradients (rotated around a center point)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want
to render smooth transitions among. You can also set a starting point and a direction (or an angle) along
with the gradient effect.
age 109 of 167

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

</body>
</html>
age 110 of 167

Direction - Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning to
yellow:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>

<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

</body>
</html>
age 111 of 167

Direction - Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts
red, transitioning to yellow:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>

<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

</body>
</html>

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops:
age 112 of 167

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}

#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>

<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>

<h2>7 Color Stops (evenly spaced):</h2>

<h2>3 Color Stops (not evenly spaced):</h2>

</body>
</html>
age 113 of 167

The following example shows how to create a linear gradient (from left to right) with the color of the
rainbow and some text:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
age 114 of 167

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">

Rainbow Background
</div>

</body>
</html>

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the
rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full
transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent,
transitioning to full color red:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>

age 115 of 167

<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the
rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full
transparency, 1 indicates full color (no transparency).</p>

</body>
</html>

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
age 116 of 167

background-color: red; /* For browsers that do not support gradients */

background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

</body>
</html>

CSS Shadow Effects

With CSS you can add shadow to text and to elements.

In these chapters you will learn about the following properties:

 text-shadow
 box-shadow

CSS Text Shadow

The CSS text-shadow property applies shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

<!DOCTYPE html>
<html>
age 117 of 167

<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Next, add a color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
age 118 of 167

Then, add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
age 119 of 167

The following example shows a white text with black shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
age 120 of 167

Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated list of shadows.

The following example shows a red and blue neon glow shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>
age 121 of 167

The following example shows a white text with black, blue, and darkblue shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
age 122 of 167

CSS box-shadow Property

The CSS box-shadow property is used to apply one or more shadows to an element.

Specify a Horizontal and a Vertical Shadow

In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow
is the current text-color.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>
age 123 of 167

Add a Blur Effect to the Shadow

The blur parameter defines the blur radius. The higher the number, the more blurred the shadow will
be.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a 5px blurred, lightblue box-shadow.</div>

</body>
</html>
age 124 of 167

CSS Styling Images

Rounded Images

Use the border-radius property to create rounded images:

<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>

<h2>Rounded Image</h2>

<p>Use the border-radius property to create rounded images:</p>

</body>
</html>
age 125 of 167

<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>

<h2>Circled Image</h2>

<p>Use the border-radius property to create circled images:</p>

</body>
</html>
age 126 of 167

Thumbnail Images

Use the border property to create thumbnail images.

<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>

<h2>Thumbnail Image</h2>

<p>Use the border property to create thumbnail images:</p>

</body>
</html>
age 127 of 167

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Thumbnail Image as Link</h2>

<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as
a link.</p>
<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">

</body>
</html>

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>

<h2>Responsive Image</h2>

<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>

</body>
</html>
age 129 of 167

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower the value, the more
transparent:</p>

<p>Image with 50% opacity:</p>

</body>
</html>
age 130 of 167

Navigation menu and hyperlinks are enabled in the pages

A website navigation menu is an organized list of links to other web pages, usually internal site pages.
Navigation menus appear in page headers or sidebars across a website, allowing visitors to access the
most useful pages quickly.

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important
attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links
will appear as follows in all browsers: An unvisited link is underlined and blue.

5websitenavigationmenubestpractices

Inspired to emulate the website navigation examples above? Here are five best practices for designing
your site’s navigation:

1. Draw user attention

When users land on your website, they have a purpose in mind. It could be any of the following:

 Search for information on a product or service

 Browse items and services
 Learn about your company
 Purchase an item
 Leave a review
 Contact you

Helping users find what they need quickly is essential for a great user experience. Drawing their attention
to menus and text is one of the best ways to help them achieve their objective quickly and effortlessly.
age 131 of 167

You can make navigation menus a different color from the background to make them readable. You can
also let it blend with your site’s overall look and make it appear when a user scrolls up or clicks the top
portion of the page.

Next, highlight essential information so that it is eye-catching. Use bold, clickable buttons for cues, like
leave a review or shop now.

2. Optimize your layout design for all screens

Fun fact: 54% of all website traffic is generated from mobile phones.
That said, it’s crucial to have a responsive website design, so that your site elements — including your
navigation bar — will display properly on any screen.
age 132 of 167

Your site visitors want a seamless experience when accessing your website. If they want to check out your
products, it must be easy to navigate your site and go from one page to the next, even on small screens.

Slow load speed, text that gets cut off, and incompatible screen resolution can affect user experience.
Adjusting your website layout for tablets, computers, and other platforms enhances your website
navigation and usability. You can get inspo from these UX design examples.

3. Guide users through your web pages with breadcrumb navigation

People might click on multiple tabs while browsing your website. For example, a user clicks on a category,
a subcategory, a product, product information, or related products. In minutes, they’ve forgotten where
they began and what they were looking for.

You can use smart navigation techniques to help users return to their initial search or starting point.
Breadcrumb navigation helps users identify where they are on your website and helps them get back to
the start. It can also make browsing your site convenient and satisfying.

4. Use a less-is-more approach with menu items

If you’ve ever ordered food off a complex restaurant menu, you know how overwhelming it can be. It’s
the same with website menus.

Looking for specific items on a lengthy nav menu can feel overstimulating. Users might get despondent
and bounce off your website.
age 133 of 167

Consider a minimalist approach to navigation menus. Add menu options strategically and sparsely to help
users instantly spot what they’re looking for.

For example, instead of adding all your service options in one menu, create separate category menus on
your top navigation with fewer options under each title.

5. Focus on data-driven design

One of the best ways to improve your website navigation for your audience is by using user activity data
to improve your website design and layout.

With tools like Google Analytics and heat maps, you can track and identify a user’s browsing patterns and
journeys. Heat maps help you identify pages and tabs that users navigate first and frequently.

Use tracking data to optimize your webpage design and make it more accessible and convenient for
users. For example, if you’re About page gets the most attention, you can move the About Us tab to the
top of your menu or the first option in your top navigation, making it more visible and easily accessible.

5differenttypesofwebsitenavigation

Here are the common types of website navigation design:

age 134 of 167

1. Header horizontal navigation bar

The horizontal navigation bar is one of the most common navbar examples. It displays website pages or
categories horizontally in the top header. The page name appears next to each, often including titles like
the following:

 About Us
 Sign Up
 Contact Us

The horizontal navigation bar highlights the primary or popular website pages, helping users spot them
quickly.

2. Vertical sidebar
age 135 of 167

A vertical sidebar navigation menu is often on the left-hand of a webpage. They give websites more space
to list their content options vertically.

While vertical sidebar navigation can work for various sites, it is most suitable for websites with a high
number of navigation links. Other design types can be ideal for websites with fewer links.

3. Drop-down navigation menu

The drop-down navigation menu expands from the top of the page, displaying website information and
product and service options. Users can hover over drop-down navigation menus and fully view the items
under a specific website page or category. Drop-down navigation menus are excellent for websites with
multiple pages and content pillars.

4. Hamburger menu

A hamburger menu lists page content vertically on a mobile device and horizontally on a computer.
age 136 of 167

When a user clicks on the three-line hamburger icon, often at the top of a page, a drop-down menu
displays a content list. Content headings can have arrows leading to subcategories.

Hamburger nav menus are great for condensing content and saving space.

5. Footer navigation menu

A footer navigation menu is a common navigation menu example. It is the menu at the bottom of a
website. The footer navigation menu often offers a broader selection of content options. It’s an excellent
way for users to find and navigate to different pages without scrolling back to the top.

Website contents are added to the pages

Page content refers to all the information contained in a website. Page content can be displayed as text,
links, images, audio, animation or videos among other things. Search engines have a limited ability to
recognize images, animation, video and audio.

What Is Website Content?

Website content includes all of the content elements, which are presented on your web pages. This can
contain texts, images, videos and audio formats in any style or form.

How to Create Stunning Content for Your Website

Now you’re clear about what content you need to create your website, let’s get into the details a little
more. In the following section, we’ll outline a step-by-step approach of how to create relevant, unique
and outstanding content for your website.
age 137 of 167
age 138 of 167

1. Define your website content strategy

If you haven’t created your own content governance plan yet – now is the time. The overall governance
plan covers all aspects of your marketing function, from planning to marketing operations.

Before you get started creating your own web page, you’ll need to define a thorough website strategy
that is in line with the governance plan. This strategy will differ greatly depending on which website
section you’re targeting.

For example, the content strategies of the product page and career section have completely different
target groups and required content.

Define your goals

First of all, you need to define the goals of your website and make them measurable. As stated
previously, each section requires a different goal and content approach.

We’ve listed the most common goals of particular sections:

 Homepage: Since all visitors, including prospective clients and job seekers, will visit this section,
the main goal of the homepage is to generate as much traffic as possible.
 Product and Pricing Page: The product page aims to sell the product or service. Therefore, the
conversion rate is its most important goal. Ask yourself: How many people that visit the web
page will actually become customers?
 Career page: The career page aims to recruit the best people out there. It’s more reliant on text
than most of the other sections. Examples of some measurable goals could be the number of job
applications generated by the career page.
 Knowledge and help center: The knowledge and help center serves multiple purposes. It helps
people find answers to their questions and it supports the customer service staff. A measurable
goal could be to decrease the number of people, who go from the FAQ section to the customer
support email form.

Once you have decided on your measurable goals, you’ll need to determine who the target audience is
for each section.

Know your target audience

How you create content for your website depends heavily on the target audience and the target
audience varies greatly depending on the web page section.
It’s important to be clear about the fact that your products’ target markets are not necessarily the same
target audience, as for all of your web page sections. In fact, the only page where the target market
equals the target audience are the product and pricing sections. The rest varies according to your goals
and what the section offers.

Whereas a toy company may target parents and children on their product pages, the target audience for
the career page is young or experienced professionals, and the “About us” section may be aimed at
investors or cooperation partners.
age 139 of 167

It’s obvious that if you take a single approach to such a heterogeneous group of visitors you’re doomed
to fail. Therefore, the audience of each section needs to be defined and addressed individually.

To find out more about your target audience, check out our article on effective buyer personas.

Come up with website content ideas

How can you attract attention and draw customers back to your website? As a first step, it makes sense
to conduct a brainstorming session about possible content ideas, to make each website section stand
out and to offer unique and relevant content. In the following section, we’ll outline this process in more
detail.

2. Plan your website content

Website content creation requires thorough initial planning, in order to determine the right mixture of
text, pictures and video content, as well as to establish all the relevant workflows.
In the following, we’ll describe how to plan your content creation.

Do a competitor research and analysis

You don’t have to start everything from scratch. It’s common practice to conduct a thorough analysis of
the competitors’ web pages to gain some initial ideas to build upon.

Ask yourself the following questions about your competitors’ websites:

 What is the target market?

 How is the market structured?
 What is the mix of text, images and videos?

You might also want to know how well the competitor pages perform. You can use traffic estimation
tools, such as SimilarWeb, to get an estimation of how many visitors your competitors are getting. Check
out our article about the proven 10-step process to perform a competitive analysis.
age 140 of 167

Source: SimiliarWeb Homepage

Sitemap and Wireframe Creation

Content management alone is not sufficient to create a working website. You’ll need to collaborate
closely with your IT department to plan and execute the overall website structure.

This step usually takes a lot of time, as it involves all of the important menus, links and content –
basically you need to plan and implement the entire architecture of the website.

Once this initial step is finished, from planning to marketing operations, the IT team can create a
sitemap. A sitemap makes it easier for search engines to find your content and, therefore, contributes to
SEO. This is the reason why your sitemap needs to be ready at launch.

Source: XBSoftware

As a next step, a wireframe needs to be created. This is an initial visual representation of the user-
interface, without any design or art elements. A wireframe is an important milestone, as it serves as a
communication tool and gives all the stakeholders an overview of the website, without any distracting
design elements.
age 141 of 167

SEO

To make your text discoverable, it needs to appear on top of the search engine results. SEO is an
ongoing process, as you have to stay up-to-date regarding Google’s latest search algorithm changes.

Use SEO tools, such as Ahrefs, for your keyword research.

It’s important to mention that the quality of your content should in no way be impaired by your SEO
keywords. In a best-case scenario, your readers won’t even realize you’ve used SEO-friendly keywords in
your copy.

However, SEO doesn’t stop with written content. Google also takes the file name of your photos into
account. Therefore, instead of using random names, such as “Photo1.jpg”, give your photo files
meaningful names, which include SEO-friendly keywords. Additionally, when you’re uploading your
pictures to the web page, don’t forget to fill in all the remaining metadata; such as, captions, alt text and
descriptions. This will boost your SEO further.

As we pointed out earlier, each web page section has a different target audience. Therefore, keep it in
mind that SEO keywords should also be chosen according to each section of your web page. Your
product page will require different keywords than your career section.

In the following, we summarized the most common SEO practices:

 Your main keywords should be part of your headlines

 Add a title tag and meta description
 Optimize the loading speed of your website
 Make use of internal and external linking
 Use image meta tags
 Most importantly, publish unique and interesting content

3. Create your website content

While IT specialists look after the overall website architecture, it’s up to the website content team to
bring the web page to life.

The following roles and responsibilities are a typical part of every website team:

Website Content Writer

How do you write content for a website? This is where content writers come into play. Website content
writers can be employed in-house, through agencies or on a freelance basis and they offer website
content writing services.

Even though website content depends heavily on the website’s goals and target audience, there are
several commonalities, which are true for all copy:
age 142 of 167

 Keep it crisp and clear: According to the Nielsen Norman Group, on average users read just 20%
of a web page’s content. As the number of words goes on the page up, the percentage of read
content decreases even further.
 Produce scannable content: 79% of all web page visitors don’t read, but scan the site for the
information they’re looking for. This means, information is best transmitted by using short
sentences, highlighting keywords and using bullet points.
 Keep it simple: A lot of people might be surprised to hear this, but according to the National
Adult Literacy Survey, the average American reads at a 7th to 8th grade level, which translates to
literature such as the Harry Potter series or the Great Gatsby. You can make use of free content
marketing tools such as ReadabilityFormulas.com or Online-Utility.org to check the readability of
your copy.

Source: Online-Utility.org

Graphic Designer

A picture is worth a thousand words – this famous sentence could not be truer when it comes to web
page copy or social media posts. Nowadays, most companies try to convey their messages through
visuals instead of written content.

Graphic designers are tasked with creating a multitude of different visual assets, including:

 Logos: Attach your logo to the header, since this is one of the most scanned sections of a web
page.
 Scenario photos: Scenario-themed photos give viewers a feeling of how the product is used.
 Regular product photos: Regular product photos reveal a lot about the product at a glance. It’s
important to show not just the product, but also to reveal parts that are not visible at first sight,
such as the bottom of a laptop.
 3D Renderings: Often, companies need to publish their product pictures, before the actual
product is even finished. 3D renderings help companies produce pictures before a prototype is
ready.
 Infographics: In addition to their aesthetic aspect, infographics provide a lot of information in a
concise way. You can find many varied infographic templates here.
age 143 of 167

Website Content Manager

The website content manager is responsible for the project. They plan the website section, including all
the visual content and they need to brief all of the stakeholders accordingly. The website content
manager keeps track of all milestones and discusses the results with all the involved decision-makers.
A good content manager needs a great understanding of the target audience, a creative mind and
excellent project management skills.

4. Review and approve your website content

People outside the marketing function might think that the creation of marketing assets is the most
time-consuming process, however this is not necessarily true. Most content managers will agree that
reviewing any kind of website content and getting the approvals from all of the involved stakeholders is
more time-consuming and nerve-wrecking.

Who needs to review and approve your content?

Your content needs to go through multiple stages, to ensure it is consistent and of high quality, before it
gets the final seal of approval. This might mean having it reviewed by colleagues from the marketing
team, the marketing manager, as well as other departments, such as dedicated members of the sales,
design or compliance function teams.

What causes approval bottlenecks?

No matter whether you work in a small company or in a multinational one, sooner or later you’ll
encounter the following scenario: A deadline is coming up soon and your content is already finished. The
only thing missing is the final approval.
age 144 of 167

This sounds promising at first sight. However, the long email chains you wrote to all stakeholders remain
unanswered. This can go on for days and even weeks – wasted time, which most tightly planned projects
don’t allow for. This type of bottleneck is not only painful and requires a lot of time to chase after
individuals, but it can threaten the entire project.

So, the important question is: How can you streamline this process as much as possible?

The answer is simple. By using a website annotation tool, such as Filestage, you can make this usually
painstaking process easy, structured and efficient. No matter whether it is the written content of your
web page, the visual elements or the videos, Filestage offers one single platform to annotate
websites and designs.
This website feedback tool gives you a constant overview of the approval status of all content pieces.
Additionally, it keeps the entire process easy, fast and efficient for everyone involved. You also save time
and money by using intelligent tools, which is a great way to contribute to the marketing resource
management strategy.
age 145 of 167

5. Publish your website content

After you have finished the review and approval process, it’s time to publish your website content. In
order to do this, you need to use a reliable content management system (CMS).

What is a CMS and why should you use one?

CMS can briefly be described as software applications that are used for managing web content. A
content management system makes the job easier for all of the involved stakeholders.

A good CMS should be able to publish a wide variety of content, including blog articles or websites with
a customizable layout. While most CMSs are used by technical staff, there are CMSs, which allow people
with no coding skills to manage website content on their own.

In addition, a CMS should help you improve your SEO. To ensure this happens, the marketing team
needs to work closely together with the design and IT teams to be on the same page. For more
information on which CMS to use, take a look at the next section.

What to consider when publishing your website content?

There are a couple of things to remember during the publication process. First, you’ll need to create a
sitemap for Google, in order to boost SEO further. A sitemap is a file that provides information regarding
your pages, your content and the relationship between them. This makes it easier for Google to crawl
and display your site. Sitemap generators such as XML-Sitemaps help you create a sitemap and, thus,
boost your SEO.

Don’t forget the final check

The devil is in the detail, so you’ll need to check that everything is displayed as planned, both before and
after the final launch of your website. You need to check whether the text and visuals are displayed
correctly and whether the content is mobile friendly.

In addition to this, the design team also needs to check whether all codes are valid. Furthermore, SEO
elements such as title, descriptions, keyword tags and metadata of pictures should be checked once
again.

HTML/CSS are validated

The purpose of validation and computerized checking of HTML, XHTML, and CSS documents is to help
make sure that the documents are syntactically correct and problem-free.

W3C Validator

The W3C validator ensures cross-platform compatibility and accessibility through correct coding best
practices. Learn how to use it here.
age 146 of 167

W3C Validation: How It Works & Supports SEO

Web standards are important because they give web developers a standard set of rules for writing code.

If all code used by your company is created using the same protocols, it will be much easier for you to
maintain and update this code in the future.

This is especially important when working with other people’s code.

If your pages adhere to web standards, they will validate correctly against W3C validation tools.

When you use web standards as the basis for your code creation, you ensure that your code is user-friendly
with built-in accessibility.

When it comes to SEO, validated code is always better than poorly written code.

According to John Mueller, Google doesn’t care how your code is written. That means a W3C validation
error won’t cause your rankings to drop.

You won’t rank better with validated code, either.

age 147 of 167

But there are indirect SEO benefits to well-formatted markup:

 Eliminates Code Bloat: Validating code means that you tend to avoid code bloat. Validated code is generally
leaner, better, and more compact than its counterpart.

 Faster Rendering Times: This could potentially translate to better render times as the browser needs less
processing, and we know that page speed is a ranking factor.

 Indirect Contributions to Core Web Vitals Scores: When you pay attention to coding standards, such as
adding the width and height attribute to your images, you eliminate steps that the browser must take in
order to render the page. Faster rendering times can contribute to your Core Web Vitals scores, improving
these important metrics overall.

Six reasons Google still recommends code validation, because it:

1. Could affect crawl rate.

2. Affects browser compatibility.

3. Encourages a good user experience.

4. Ensures that pages function everywhere.

5. Useful for Google Shopping Ads.

6. Invalid HTML in head section breaks Hreflang.

Multiple Device Accessibility

Valid code also helps translate into better cross-browser and cross-platform compatibility because it
conforms to the latest in W3C standards, and the browser will know better how to process that code.
This leads to an improved user experience for people who access your sites from different devices.

If you have a site that’s been validated, it will render correctly regardless of the device or platform being
used to view it.

That is not to say that all code doesn’t conform across multiple browsers and platforms without validating,
but there can be deviations in rendering across various applications.

Common Reasons Code Doesn’t Validate

Of course, validating your web pages won’t solve all problems with rendering your site as desired across all
platforms and all browsing options. But it does go a long way toward solving those problems.
age 148 of 167

In the event that something does go wrong with validation on your part, you now have a baseline from
which to begin troubleshooting.

You can go into your code and see what is making it fail.

It will be easier to find these problems and troubleshoot them with a validated site because you know
where to start looking.

Having said that, there are several reasons pages may not validate.

Browser Specific Issues

It may be that something in your code will only work on one browser or platform, but not another.

This problem would then need to be addressed by the developer of the offending script.

This would mean having to actually edit the code itself in order for it to validate on all platforms/browsers
instead of just some of them.

You Are Using Outdated Code

The W3C only started rendering validation tests over the course of the past couple of decades.

If your page was created to validate in a browser that predates this time (IE 6 or earlier, for example), it will
not pass these new standards because it was written with older technologies and formats in mind.

While this is a relatively rare issue, it still happens.

This problem can be fixed by reworking code to make it W3C compliant, but if you want to maintain
compatibility with older browsers, you may need to continue using code that works, and thus forego
passing 100% complete validation.

Both problems could potentially be solved with a little trial and error.

With some work and effort, both types of sites can validate across multiple devices and platforms without
issue – hopefully!

Polyglot Documents

Polyglot documents include any document that may have been transferred from an older version of code,
and never re-worked to be compatible with the new version.

In other words, it’s a combination of documents with a different code type than what the current document
was coded for (say an HTML 4.01 transitional document type compared to an XHTML document type).
age 149 of 167

Make no mistake: Even though both may be “HTML” per se, they are very different languages and need to
be treated as such.

You can’t copy and paste one over and expect things to be all fine and dandy.

What does this mean?

For example, you may have seen situations where you may validate code, but nearly every single line of a
document has something wrong with it on the W3C validator.

This could be due to somebody transferring over code from another version of the site, and not updating it
to reflect new coding standards.

Either way, the only way to repair this is to either rework the code line by line (an extraordinarily tedious
process).

How W3C Validation Works

The W3C validator is this author’s validator of choice for making sure that your code validates across a wide
variety of platforms and systems.

With the W3C validator, it’s possible to validate your pages by page URL, file upload, and Direct Input.

 Validate Your Pages by URL: This is relatively simple. Just copy and paste the URL into the Address field, and
you can click on the check button in order to validate your code.

 Validate Your Pages by File Upload: When you validate by file upload, you will upload the html files of your
choice one file at a time. Caution: if you’re using Internet Explorer or certain versions Windows XP, this
option may not work for you.

 Validate Your Pages by Direct Input: With this option, all you have to do is copy and paste the code you
want to validate into the editor, and the W3C validator will do the rest.

While some professionals claim that some W3C errors have no rhyme or reason, in 99.9% of cases, there is
a rhyme and reason.

If there isn’t a rhyme and reason throughout the entire document, then you may want to refer to our
section on polyglot documents below as a potential problem.
age 150 of 167

HTML Syntax

Let’s start at the top with HTML syntax. Because it’s the backbone of the World Wide Web, this is the most
common coding that you will run into as an SEO professional.

The W3C has created a specification for HTML 5 called “the HTML5 Standard”.

This document explains how HTML should be written on an ideal level for processing by popular browsers.

If you go to their site, you can utilize their validator to make sure that your code is valid according to this
spec.

They even give examples of some of the rules that they look for when it comes to standards compliance.

This makes it easier than ever to check your work before you publish it!

Validators for Other Languages

Now let’s move on to some of the other languages that you may be using online.

For example, you may have heard of CSS3.

The W3C has standards documentation for CSS 3 as well called “the CSS3 Standard.”

This means that there is even more opportunity for validation!

You can validate your HTML against their standard and then validate your CSS against the same standard to
ensure conformity across platforms.

While it may seem like overkill to validate your code against so many different standards at once, remember
that this means that there are more chances than ever to ensure conformity across platforms.

And for those of you who only work in one language, you now have the opportunity to expand your
horizons!
age 151 of 167

It can be incredibly difficult if not impossible to align everything perfectly, so you will need to pick your
battles.

You may also just need something checked quickly online without having the time or resources available
locally.

Common Validation Errors

You will need to be aware of the most common validation errors as you go through the validation process,
and it’s also a good idea to know what those errors mean.

This way, if your page does not validate, you will know exactly where to start looking for possible problems.

Some of the most common validation errors (and their meanings) include:

 Type Mismatch: When your code is trying to make one kind of data object appear like another data object
(e.g., submitting a number as text), you run the risk of getting this message. This error usually signals that
some kind of coding mistake has been made. The solution would be to figure out exactly where that
mistake was made and fix it so that the code validates successfully.

 Parse Error: This error tells you that there was a mistake in the coding somewhere, but it does not tell you
where that mistake is. If this happens, you will have to do some serious sleuthing in order to find where
your code went wrong.

 Syntax Errors: These types of errors involve (mostly) careless mistakes in coding syntax. Either the syntax is
typed incorrectly, or its context is incorrect. Either way, these errors will show up in the W3C validator.

The above are just some examples of errors that you may see when you’re validating your page.

Unfortunately, the list goes on and on – as does the time spent trying to fix these problems!

Final HTML/CSS website is prepared for publishing

Once you finish writing the code and organizing the files that make up your website, you need to put it
all online so people can find it. This article explains how to get your simple sample code online with little
effort.

How to Publish a Website

Are you wondering how to publish a website? If you’re looking to start a website, it is not nearly as
difficult as people think. Publishing websites simply means employing the right tools in the right way.
age 152 of 167

There are plenty of tools available, so you need to think about your website, the scalability of your
hosting service, and the content you plan on sharing with your target market.
Regardless of the type of website you plan on making, there are several key steps you need to follow. In
this guide, we’ll walk you through the steps on how to deploy a website, from picking your domain name
to learning how to create great content. Learn more about how to make a website and create a
website that your followers will love below.

Step 1: Choose how you’ll publish your website

So, how do you publish a website? There are several options available. If you have a significant amount
of coding knowledge, then that may be the path you choose. You can build a website from scratch if you
have knowledge of JavaScript, HTML, and CSS. Unless you have a background in computer science,
building a website from scratch might not be the best option. Unless you can do this yourself, you will
need to bring in a developer who can help you. The advantage of using this option is that you have a
tremendous amount of flexibility. You don't have to worry about tailoring your website and meeting the
demands of certain plugins or software programs.
Fortunately, there are other options available. For example, you may want to use a website builder that
can help you. This is a tool that has a drag-and-drop interface that you can use to create your own
website without the need for coding knowledge. There are some situations where the website builder
will even allow you to host your website for free, which can make the process of creating a website even
easier. Some of these tools have their limitations, but there are plenty of them available. You simply
need to find the right one to meet your needs.

You might also be interested in using a content management system (CMS) that can help you. This is a
software program that allows you to create, manage, and edit the content on your website. Just about
anyone can use a content management system, but there may be a slight learning curve. It may take you
longer to learn how to use this tool when compared to a traditional website builder, but you have plenty
of widgets and plugins you can use to customize your website to meet your needs.

Additionally, you can use a combination of all of the tools above to help you put together a strong
website. Consider your technical expertise and the goals of your website. Then, you can find the right
tool to meet your needs.
age 153 of 167

Step 2: Pick your domain name

The next step is to pick your domain name. Regardless of whether you want to start a blog, an e-
commerce website, or even an encyclopedia, you need to have the right domain name. The domain
name is the URL string that someone will enter to visit your website. There are plenty of domain names
out there, which means you might not be able to always find the one you’re looking for. In this case, you
can use tools that can help you take a look at the domain names that are still free.

When you are picking a new domain name, you want to pick a name that is representative of what your
website offers and is relatively easy to remember. If your domain name has already been taken, you may
want to consider changing the top-level domain. Instead of using .com or .org, you may want to pick a
different one that is still available. Be careful about using one that is too obscure, as people may refrain
from visiting a top-level domain with which they are not familiar.

Step 3: Choose a web hosting provider

The next step in publishing websites is to choose a web hosting provider. A web hosting provider is a
service that will make sure your website works when someone visits it. If someone tries to visit your
website and there is no hosting service, the page will not load. You might be able to access a free
hosting provider through the tool that you use to build your website. Eventually, you may need to go
with a premium hosting provider. A free service might limit the amount of traffic your website can
handle at once. As your website becomes more popular, you will need to increase your bandwidth. This
will require investing in a stronger hosting provider.

You need to take a look at the reviews, ratings, and limits of your hosting provider. If your hosting
provider is unable to handle your traffic, this can result in slower page speeds that turn customers and
visitors away. A high bounce rate can harm your search results rankings, which can make it more difficult
for users to find your website organically. Make sure you use a reliable hosting provider that can grow
with your site.

Step 4: Create content for your website

Before people can start visiting your website, you need to have content they can view. Content can
come in various forms, including written content, videos, and images. Often, these forms of content
work together. For example, if you have blog posts ready to be posted, you can include unique images
and videos to capture the attention of your audience to improve readability and user experience.
Additionally, you may want to create a way for them to provide you with feedback or comments after
reading.
Of course, you need to choose content that will drive traffic to your website. As a result, you may want
to run a search engine optimization campaign. This is the process of customizing the content on your
website to meet the demands of search engines. This means conducting keyword research to figure out
what terms and phrases people use when they are looking for the content that you have on your
website.
If you are wondering how to do keyword research, there are tools that can help you identify terms and
phrases that are helpful for you to use in your content. Remember that you need to think about not only
age 154 of 167

how popular the terms are but also how competitive they are. You may have a difficult time competing
with multinational corporations that are targeting the same terms.
Step 5: Design your website

The next step in how to publish a website is to design your website. Web design is crucial, as it’s how
your website looks and feels when users visit. Poor web design can decrease user experience, which can
turn people away from staying on your site. Some key components of web design include:

 Branding: Ensure you’re using consistent brand colors, fonts, and tone throughout your site that
align with your logo, values, and mission.
 Layout: One of the most important things is that you need to make your website easy to
navigate with a clean and simple layout. When someone visits your website, they can get
frustrated if they cannot find what they are looking for. To ensure a good layout, include a
navigation menu with buttons that work, ensure text is readable, and organize your content.
 Mobile friendliness: Additionally, you want to design your website for mobile users. Mobile use
and shopping are becoming more and more prevalent, which means your website layout should
fit the standard width of phone screens with text, buttons, images, and videos appearing in the
right place. In fact, shoppers with a negative mobile experience are 62% less likely to make a
purchase from that site in the future.

User experience (UX): Good user experience comes in many forms. To ensure your visitors want to stay,
incorporate white space throughout your layout to allow their eyes to rest and focus, ensure fast page
speeds, incorporate navigation tools, and use CTAs throughout to guide them through the sales funnel.

Step 6: Test your website

age 155 of 167

The next step in how to deploy a website is to test it. Before your website goes live, you need to test all
of the individual buttons and links to make sure they work.

To test your website, start by clicking on everything to make sure it takes you exactly where you want to
go. If you have a search function, you need to make sure it works as it should. You should also take a
look at your color scheme to make sure it aligns with your brand and logo. You don't want anything to
get lost in the background simply because the colors don't line up well. You might even want to have a
third party test your website for you to provide you with some feedback.

Step 7: Publish your website

If you are ready to publish your website, you can hit the publish button and allow it to go live. Generally,
search engines are very good about indexing your website eventually, but you may want to proactively
submit your website to Google. For example, you may want to use Google Search Console and Bing
Webmaster Tools to verify ownership of your website. This could make it easier for people to discover
your website using a search engine.

Step 8: Maintain your website

Of course, you also need to maintain your website. For example, as your website grows, you may have
different needs as far as web hosting. You need to make sure that you work with a provider that can
grow with your website. Test the speed of your website from time to time and make sure it is not too
slow. If it is slow to load, you may want to invest in a better hosting service.

You also need to take a look at your links from time to time to make sure they still work. Broken links
can ding your website, which can make it hard for you to maintain your web traffic. You should also keep
an eye on your search results rankings to make sure they don't begin to suffer. If they start to drop, you
may need to reassess your SEO campaign.
age 156 of 167

File Transfer Protocol (FTP) Program is utilized

File transfer protocol (FTP) is a way to download, upload, and transfer files from one location to another
on the internet and between computer systems. FTP enables the transfer of files back and forth
between computers or through the cloud. Users require an internet connection in order to execute FTP
transfers.

File Transfer Protocol (FTP)




File transfer protocol (FTP) is an Internet tool provided by TCP/IP. The first feature of FTP is developed
by Abhay Bhushan in 1971. It helps to transfer files from one computer to another by providing access to
directories or folders on remote computers and allows software, data, text file to be transferred
between different kinds of computers. The end-user in the connection is known as localhost and the
server which provides data is known as the remote host.

The goals of FTP are:

 It encourages the direct use of remote computers.

 It shields users from system variations (operating system, directory structures, file structures, etc.)
 It promotes sharing of files and other types of data.

Why FTP?

FTP is a standard communication protocol. There are various other protocols like HTTP which are used
to transfer files between computers, but they lack clarity and focus as compared to FTP. Moreover, the
systems involved in connection are heterogeneous systems, i.e. they differ in operating systems,
directory, structures, character sets, etc. the FTP shields the user from these differences and transfer
data efficiently and reliably. FTP can transfer ASCII, EBCDIC, or image files. The ASCII is the default file
share format, in this, each character is encoded by NVT ASCII. In ASCII or EBCDIC, the destination must
be ready to accept files in this mode. The image file format is the default format for transforming binary
files.

FTP Clients

FTP works on a client-server model. The FTP client is a program that runs on the user’s computer to
enable the user to talk to and get files from remote computers. It is a set of commands that establishes
the connection between two hosts, helps to transfer the files, and then closes the connection. Some of
the commands are: get filename (retrieve the file from server), mget filename (retrieve multiple files
from the server), ls (lists files available in the current directory of the server). There are also built-in FTP
programs, which makes it easier to transfer files and it does not require remembering the commands.

Type of FTP Connections

FTP connections are of two types:

age 157 of 167

Active FTP connection: In an Active FTP connection, the client establishes the command channel and the
server establishes the data channel. When the client requests the data over the connection the server
initiates the transfer of the data to the client. It is not the default connection because it may cause
problems if there is a firewall in between the client and the server.

Passive FTP connection: In a Passive FTP connection, the client establishes both the data channel as well
as the command channel. When the client requests the data over the connection, the server sends a
random port number to the client, as soon as the client receives this port number it establishes the data
channel. It is the default connection, as it works better even if the client is protected by the firewall.

Anonymous FTP

Some sites can enable anonymous FTP whose files are available for public access. So, the user can access
those files without any username or password. Instead, the username is set to anonymous and the
password to the guest by default. Here, the access of the user is very limited. For example, the user can
copy the files but not allowed to navigate through directories.

How FTP works?

The FTP connection is established between two systems and they communicate with each other using a
network. So, for the connection, the user can get permission by providing the credentials to the FTP
server or can use anonymous FTP.

When an FTP connection is established, there are two types of communication channels are also
established and they are known as command channel and data channel. The command channel is used
to transfer the commands and responses from client to server and server to client. FTP uses the same
approach as TELNET or SMTP to communicate across the control connection. It uses the NVT ASCII
character set for communication. It uses port number 21. Whereas the data channel is used to actually
transfer the data between client and server. It uses port number 20.

The FTP client using the URL gives the FTP command along with the FTP server address. As soon as the
server and the client get connected to the network, the user logins using User ID and password. If the
user is not registered with the server, then also he/she can access the files by using the anonymous login
where the password is the client’s email address. The server verifies the user login and allows the client
to access the files. The client transfers the desired files and exits the connection. The figure below shows
the working of FTP.

Detail steps of FTP

 FTP client contacts FTP server at port 21 specifying TCP as transport protocol.
 Client obtain authorization over control connection.
 Client browse remote directory by sending commands over control connection.
 When server receives a command for a file transfer, the server open a TCP data connection to client.
 after transferring one file, server closes connection.
 server opens a second TCP data connection to transfer another file.
 FTP server maintains state i.e. current directory, earlier authentication.
age 158 of 167

Transmission mode

FTP transfer files using any of the following modes:

 Stream Mode: It is the default mode. In stream mode, the data is transferred from FTP to TCP in
stream bytes. Here TCP is the cause for fragmenting data into small segments. The connection is
automatically closed if the transforming data is in the stream bytes. Otherwise, the sender will close
the connection.
 Block Mode: In block mode, the data is transferred from FTP to TCP in the form of blocks, and each
block followed by a 3-byte header. The first byte of the block contains the information about the
block so it is known as the description block and the other two bytes contain the size of the block.
 Compressed Mode: This mode is used to transfer big files. As we know that, due to the size limit we
cannot transfer big files on the internet, so the compressed mode is used to decrease the size of the
file into small and send it on the internet.

FTP Commands

Sr. no. Command Meaning

1. cd Changes the working directory on the remote host

2. close Closes the FTP connection

3. quit Quits FTP

4. pwd displays the current working Directory on the remote host

age 159 of 167

Sr. no. Command Meaning

5. dir or ls Provides a Directory Listing of the current working directory

6. help Displays a list of all client FTP commands

7. remotehelp Displays a list of all server FTP commands

8. type Allows the user to specify the file type

9. struct specifies the files structure

Applications of FTP

The following are the applications of FTP:

 FTP connection is used by different big business organizations for transferring files in between them,
like sharing files to other employees working at different locations or different branches of the
organization.
 FTP connection is used by IT companies to provide backup files at disaster recovery sites.
 Financial services use FTP connections to securely transfer financial documents to the respective
company, organization, or government.
 Employees use FTP connections to share any data with their co-workers.

Advantages

 Multiple transfers: FTP helps to transfer multiple large files in between the systems.
 Efficiency: FTP helps to organize files in an efficient manner and transfer them efficiently over the
network.
 Security: FTP provides access to any user only through user ID and password. Moreover, the server
can create multiple levels of access.
 Continuous transfer: If the transfer of the file is interrupted by any means, then the user can
resume the file transfer whenever the connection is established.
 Simple: FTP is very simple to implement and use, thus it is a widely used connection.
 Speed: It is the fastest way to transfer files from one computer to another.

Disadvantages

 Less security: FTP does not provide an encryption facility when transferring files. Moreover, the
username and passwords are in plain text and not a combination of symbols, digits, and alphabets,
which makes it easier to be attacked by hackers.
 Old technology: FTP is one of the oldest protocols and thus it uses multiple TCP/IP connections to
transfer files. These connections are hindered by firewalls.
age 160 of 167

 Virus: The FTP connection is difficult to be scanned for viruses, which again increases the risk of
vulnerability.
 Limited: The FTP provides very limited user permission and mobile device access.
 Memory and programming: FTP requires more memory and programming efforts, as it is very
difficult to find errors without the commands.

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=5B1-22MFD10
https://www.youtube.com/watch?v=it1rTvBcfRg
https://www.youtube.com/watch?v=XPv4EeB0PJ8
Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.giovannicreative.com/how-to-slice-and-export-images-in-photoshop/
https://www.ozzu.com/wiki/596407/slicing-images-with-photoshop-cs6-psd-to-html
https://www.w3schools.com/
https://html.com/
https://www.webfx.com/blog/web-design/website-navigation-examples/#:~:text=The%20horizontal
%20navigation%20bar%20is,About%20Us
https://filestage.io/blog/website-content/
https://www.searchenginejournal.com/w3c-validator-guide/437030/
https://mailchimp.com/resources/how-to-publish-a-website/
https://www.geeksforgeeks.org/file-transfer-protocol-ftp/
eBook:
 Responsive Web Design Techniques by: Abdelaziz I. Hammouri
 Responsive Web Design with HTML5 and CSS3 by: Ben Frain
 The Complete Reference HTML and CSS 5th ed. By: Thomas A. Powell
age 161 of 167

Assessment 10-1:
Written Test

Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. Parse Error tells you that there was a mistake in the coding somewhere, but
it does not tell you where that mistake is.
_____________ 2. When your code is trying to make one kind of data object appear like another
data object (e.g., submitting a number as text), you run the risk of getting this
message.
_____________ 3. Syntax Errors is not the cause of careless mistakes in coding syntax.
_____________ 4. You may also just need something checked quickly online without having the
time or resources available locally.
_____________ 5. While it may seem like overkill to validate your code against so many
different standards at once, remember that this means that there are more
chances than ever to ensure conformity across platforms.
_____________ 6. When you validate by file upload, you will upload the html files of your
choice one file at a time.
_____________ 7. The W3C has standards documentation for CSS 3 as well called “the WPC3
Standard.”
_____________ 8. Validating code means that you tend to avoid code bloat. Validated code is
generally leaner, better, and more compact than its counterpart.
_____________ 9. If all code used by your company is created using the same protocols, it will
be much easier for you to maintain and update this code in the future.
_____________ 10. The purpose of validation and computerized checking of HTML, XHTML,
and CSS documents is to help make sure that the documents are
syntactically correct and problem-free.

Test II: Multiple Choice: Write your chosen letter on the space provided.

1. FTP requires more and programming efforts, as it is very

difficult to find errors without the commands.

a. space b. programming c. memory

__________ 2. FTP does not provide an ___________ facility when transferring files.
a. encryption b. device c. storage
__________ 3. FTP helps to transfer __________ large files in between the systems.
a. single b. multiple c. junk
__________ 4. Employees use ________ connections to share any data with their co-
workers.
a. UTP b. FTP c. STP
__________ 5. In an Active FTP connection, the client establishes the command channel and
the server establishes the ________ channel.
a. data b. music c. storage
__________ 6. The FTP connection is established between _________ systems and they
communicate with each other using a network.
age 162 of 167

a. three b. four c. two

__________ 7. The FTP client using the _________ gives the FTP command along with the
FTP server address.
a. ILY b. IOU c. URL
__________ 8. FTP client contacts FTP server at port _______ specifying TCP as transport
protocol
a. 21 b. 22 c. 20
__________ 9. In __________ mode, the data is transferred from FTP to TCP in stream
bytes.
a. block b. stream c. compressed
__________ 10. In __________ mode, the data is transferred from FTP to TCP in the form of
blocks, and each block followed by a 3-byte header.
a. compress b. block c. stream

Test III: Enumeration

How to publish your website?

1. ___________________________________________
2. ___________________________________________
3. ___________________________________________
4. ___________________________________________
5. ___________________________________________
6. ___________________________________________
7. ___________________________________________
8. ___________________________________________
age 163 of 167

Activity 1

Objective: Slice a mockup in Photoshop CS.

Steps/Procedure: Use the mockup you have created in previous lessons.

1. Open the image file you want to slice.

2. Select “Slice Tool” form the “Tool Box”.
3. Right click on the “Slice Tool”, click on “Select slice tool”.
4. Right click on rectangle icon.
5. Click on “Divide slice” option.
6. Select horizontally and/or vertically.
7. See the image being divided equally.
8. Save the image.

After achieving the activity, explain to the class how you sliced your mockup design.

Activity 2

Objective: Create a simple web page using HTML.

Steps/Procedure: Base on your mockup design, implement HTML codes to the pages.

1. Create your own web page using HTML referring to Lesson 10.
2. Apply the HTML, code copy and paste on notepad then edit.
3. Replace the content and image of the page.
4. Appreciate a well created web page.

Discuss how you apply HTML code to your design.

Activity 3

Objective: Create a simple web page applying CSS with HTML.

Steps/Procedure: Base on your mockup design, implement CSS codes to the pages.

1. Create your own web page using CSS referring to Lesson 10.
2. Apply the CSS, code copy and paste on notepad then edit.
3. Replace the content and image of the page.
4. Appreciate a well created web page.

Discuss how you apply CSS code to your design.

age 164 of 167

Activity 4

Objective: Create a simple navigation bar.

Steps/Procedure:

1. Open “Notepad”.
2. Type the HTML code to start a html document.
3. Write “Make a Navigation Bar” for the title.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
</Head>
<Body>
</Body>
</Html>
4. Define the navigation tag <nav> in the body tag <body>.
<Body>
<nav>

</nav>
</Body>
</Html>
5. Define the unordered list <ul> tag then define the list item <li> tag.
<Body>
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
age 165 of 167

<a href="#"> About </a>

</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
You are at JavaTpoint Site.....
</Body>
</Html>
6. Define the style <style> tag.
<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>

</style>
</Head>
7. Specify the id attributes to be use to set the position and color of the navigation bar.
<style type=text/css>
body
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
age 166 of 167

}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style>
8. Save the html file.

Output:
age 167 of 167

What Men Dont Want Women To Know - The Secrets, The Lies, The Unspoken Truth - Smith and Doe
90% (20)
What Men Dont Want Women To Know - The Secrets, The Lies, The Unspoken Truth - Smith and Doe
157 pages
Free Cash App Money
60% (20)
Free Cash App Money
6 pages
Attached The New Science of Adult Attach PDF
7% (28)
Attached The New Science of Adult Attach PDF
3 pages
Ultimate Tradeline Guide PDF
46% (13)
Ultimate Tradeline Guide PDF
23 pages
Cell Phone Lock Removal
80% (10)
Cell Phone Lock Removal
32 pages
Latest Sba Method To Get 10K+ Loans (Updated)
83% (6)
Latest Sba Method To Get 10K+ Loans (Updated)
5 pages
Storm Kings Thunder
100% (19)
Storm Kings Thunder
258 pages
Autism Spectrum Ratig Scales
71% (7)
Autism Spectrum Ratig Scales
16 pages
Scores
26% (23)
Scores
12 pages
Hacking Uber For Profite PDF
100% (6)
Hacking Uber For Profite PDF
5 pages
Money Dropper: Drop Money Like It'S Hot: Leaked by Captaincrunch
75% (4)
Money Dropper: Drop Money Like It'S Hot: Leaked by Captaincrunch
10 pages
Gambrel Barn and Shed Plans Construction Blueprints (John Davidson, Specialized Design Systems)
100% (1)
Gambrel Barn and Shed Plans Construction Blueprints (John Davidson, Specialized Design Systems)
85 pages
47 Easy DIY Survival Projects
94% (16)
47 Easy DIY Survival Projects
97 pages
Make Over $500 A Day Now With Secret Crack With Free Money
100% (11)
Make Over $500 A Day Now With Secret Crack With Free Money
13 pages
Rocket Loan Method
90% (10)
Rocket Loan Method
10 pages
Skip Tracing 101
100% (1)
Skip Tracing 101
5 pages
The Ultimate Drop Shipping Cheat Sheet
100% (1)
The Ultimate Drop Shipping Cheat Sheet
18 pages
Hacking I Cloud
83% (6)
Hacking I Cloud
34 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
HTML Solo Learn
No ratings yet
HTML Solo Learn
54 pages
Web Designing Assignment
No ratings yet
Web Designing Assignment
27 pages
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
From Everand
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
i Code Academy
4/5 (7)
Free Woodworking Plans Projects
100% (5)
Free Woodworking Plans Projects
440 pages
Habit Stacking
100% (41)
Habit Stacking
73 pages
Simple Web Programming for Beginners
From Everand
Simple Web Programming for Beginners
Hanaan AM
No ratings yet
Web Design With Html5, a Primer
From Everand
Web Design With Html5, a Primer
Matthew Macarty
No ratings yet
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Introduction to HTML & CSS
From Everand
Introduction to HTML & CSS
Claudia Da Silva
4.5/5 (4)
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
HTML
No ratings yet
HTML
74 pages
HTML Course Introduction For Igcse
No ratings yet
HTML Course Introduction For Igcse
36 pages
Mission HTML
From Everand
Mission HTML
Sheela Preuitt
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
Editors: Write HTML Using Notepad or Textedit
No ratings yet
Editors: Write HTML Using Notepad or Textedit
4 pages
What Is HTML
No ratings yet
What Is HTML
32 pages
How To Make A Website Notes
No ratings yet
How To Make A Website Notes
27 pages
Learn Html In 1 Hour
From Everand
Learn Html In 1 Hour
John Bura
No ratings yet
yahxee 1st class
No ratings yet
yahxee 1st class
27 pages
Basic HTML Codes for Web Pages
No ratings yet
Basic HTML Codes for Web Pages
24 pages
HTML Lesson 1
No ratings yet
HTML Lesson 1
5 pages
HTML
No ratings yet
HTML
27 pages
Bcac501 - It - Part-1-Html
No ratings yet
Bcac501 - It - Part-1-Html
117 pages
Web development
No ratings yet
Web development
32 pages
The Basics of HTML (Hypertext Markup Language) Coding For Beginners: Learn Foundational HTML Programming Concepts
From Everand
The Basics of HTML (Hypertext Markup Language) Coding For Beginners: Learn Foundational HTML Programming Concepts
Roggie Clark
No ratings yet
Web Development Step by Step
From Everand
Web Development Step by Step
Enrique Vicente
No ratings yet
HTML Introduction To Attributes
No ratings yet
HTML Introduction To Attributes
19 pages
Client Side Web Development For Beginners (HTML/CSS/JS)
From Everand
Client Side Web Development For Beginners (HTML/CSS/JS)
Maks Uri
4/5 (1)
HTML
No ratings yet
HTML
22 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web Design
From Everand
HTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web Design
Quick Start Guides
4/5 (1)
HTML Intro
No ratings yet
HTML Intro
137 pages
HTML Notes
No ratings yet
HTML Notes
23 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
52 pages
HTML
No ratings yet
HTML
47 pages
CH-7 HTML
No ratings yet
CH-7 HTML
12 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
HTML Tutorial
No ratings yet
HTML Tutorial
69 pages
Html Interview Questions
No ratings yet
Html Interview Questions
87 pages
CPC06 Advance Web Development2
No ratings yet
CPC06 Advance Web Development2
36 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
Coding Bible PDF
No ratings yet
Coding Bible PDF
32 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
Web Development Step by Step - HTML
From Everand
Web Development Step by Step - HTML
Enrique Vicente
No ratings yet
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
HTML5 Tutorial
No ratings yet
HTML5 Tutorial
32 pages
HTML in 30 Pages
From Everand
HTML in 30 Pages
U.Q. Magnusson
4.5/5 (14)
HTML
No ratings yet
HTML
84 pages
HTML Tutorial
No ratings yet
HTML Tutorial
363 pages
Cooking up the web with HTML and JavaScript
From Everand
Cooking up the web with HTML and JavaScript
Tom Henricksen
No ratings yet
HTML
No ratings yet
HTML
14 pages
Module3 HTML Source Coding 1
No ratings yet
Module3 HTML Source Coding 1
39 pages
Ip Chapter 2 HTML
No ratings yet
Ip Chapter 2 HTML
57 pages
Learning Materials and Activities Sept. 2 2024
No ratings yet
Learning Materials and Activities Sept. 2 2024
25 pages
g11 Lesson 1 Part1 Basic HTML
No ratings yet
g11 Lesson 1 Part1 Basic HTML
13 pages
Audio & Video HTML
No ratings yet
Audio & Video HTML
218 pages
Power System Analysis John Grainger 1st
No ratings yet
Power System Analysis John Grainger 1st
107 pages
Module #1 - Introduction To HTML
No ratings yet
Module #1 - Introduction To HTML
65 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
Unit 1
No ratings yet
Unit 1
48 pages
W3school (HTML Notes)
No ratings yet
W3school (HTML Notes)
13 pages
Uoc2 Lo1
No ratings yet
Uoc2 Lo1
23 pages
Lesson 14 - Create Interactive Website
No ratings yet
Lesson 14 - Create Interactive Website
21 pages
Uoc1 Lo1
No ratings yet
Uoc1 Lo1
5 pages
Uoc7 Lo3
No ratings yet
Uoc7 Lo3
11 pages
TR Bread and Pastry Production NC Ii
No ratings yet
TR Bread and Pastry Production NC Ii
67 pages
Uoc1 Lo1
No ratings yet
Uoc1 Lo1
12 pages
Community Base Training Program
No ratings yet
Community Base Training Program
2 pages
Lesson 13 - Create Interactive Website
No ratings yet
Lesson 13 - Create Interactive Website
22 pages
Lesson 18 - Develop Website Backend System
No ratings yet
Lesson 18 - Develop Website Backend System
81 pages
Lesson 11 - Develop Responsive Web Design
No ratings yet
Lesson 11 - Develop Responsive Web Design
42 pages
Lesson 19 - Develop Website Backend System
No ratings yet
Lesson 19 - Develop Website Backend System
28 pages
CBC CoC4 Leading To CSS NCII
No ratings yet
CBC CoC4 Leading To CSS NCII
12 pages
Writing - FACILITATING TRAINING SESSION
No ratings yet
Writing - FACILITATING TRAINING SESSION
4 pages
Lesson 21 - Develop Website Backend System
No ratings yet
Lesson 21 - Develop Website Backend System
22 pages
CBC CoC2 Leading To CSS NCII
No ratings yet
CBC CoC2 Leading To CSS NCII
12 pages
CBC CoC3 Leading To CSS NCII
No ratings yet
CBC CoC3 Leading To CSS NCII
10 pages
Writing - PREPARING A SESSION PLAN
No ratings yet
Writing - PREPARING A SESSION PLAN
3 pages
Writing - SUPERVISE WORK-BASED LEARNING - Ok
No ratings yet
Writing - SUPERVISE WORK-BASED LEARNING - Ok
3 pages
CBC CoC1 Leading To CSS NCII
No ratings yet
CBC CoC1 Leading To CSS NCII
12 pages
Housekeeping Inspection Check
No ratings yet
Housekeeping Inspection Check
2 pages
Waste Management Plan
No ratings yet
Waste Management Plan
4 pages
WRITING NARRATIVE - CONDUCTING.revised.
No ratings yet
WRITING NARRATIVE - CONDUCTING.revised.
3 pages
Writing - MAINTAINING TRAINING FACILITIES - Ok
No ratings yet
Writing - MAINTAINING TRAINING FACILITIES - Ok
3 pages
Trainees Individual Training Plan
No ratings yet
Trainees Individual Training Plan
3 pages
2.self Assessment Guide
No ratings yet
2.self Assessment Guide
2 pages
Performance Criteria
No ratings yet
Performance Criteria
3 pages
100 Money Apps and Life Hacks
No ratings yet
100 Money Apps and Life Hacks
8 pages
A Photographers Guide To RAW in Photoshop
No ratings yet
A Photographers Guide To RAW in Photoshop
228 pages
100 Fiverr Gigs You Can Sell Right Now PDF
80% (5)
100 Fiverr Gigs You Can Sell Right Now PDF
23 pages
Fastrack To Free Everything
100% (4)
Fastrack To Free Everything
100 pages
Ten Apples Up On Top! Pages 1 - 50 - Flip PDF Download - FlipHTML5
100% (1)
Ten Apples Up On Top! Pages 1 - 50 - Flip PDF Download - FlipHTML5
65 pages
Useful Websites
50% (2)
Useful Websites
18 pages
Adobe Illustrator
No ratings yet
Adobe Illustrator
84 pages
Apps For Musicians
100% (1)
Apps For Musicians
2 pages
Google Drive Quick Reference Guide
75% (4)
Google Drive Quick Reference Guide
4 pages
Discovering Family History
0% (1)
Discovering Family History
56 pages
Toshiba Sd-p7000 LCD
No ratings yet
Toshiba Sd-p7000 LCD
42 pages
Learning Unit 6
No ratings yet
Learning Unit 6
13 pages
FAQ On MNOP KPI Website
No ratings yet
FAQ On MNOP KPI Website
25 pages
Service Parts List PDF
No ratings yet
Service Parts List PDF
90 pages