Learn HTML & CSS

Learn how to build websites pages using html & css and start transforming your psd's file into html & css
0.0 (0 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1 student enrolled
$19
$20
5% off
Take This Course
  • Lectures 23
  • Length 2 hours
  • Skill Level Beginner Level
  • Languages Arabic
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 Arabic

Course Description

In this course you will learn how to convert digital design mockups into static web pages. We will teach you how to approach page layout, how to break down a design mockup into page elements, and how to implement that in HTML and CSS.You will start from basics HTML and CSS and at the final of the course you will be able to convert or build a webpage using HTML & CSS

What are the requirements?

  • You have to do practice after any course you'll see

What am I going to get from this course?

  • Build a simple web site page using html and css

What is the target audience?

  • this course is made for beginner student who don't know any things about html & css or about building websites

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: What is HTML ?
02:28

What is HTML?

HTML is a markup language for describing web documents (web pages).

  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

A Small HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph

Using this description, a web browser will display a document with a heading and a paragraph.

06:11

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content goes here...</tagname>

  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name

The start tag is also called the opening tag, and the end tag the closing tag.

Web Browsers

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

The browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html><head><title>Page title</title>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Only the <body> section (the white area above) is displayed in a browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps the browser to display a web page correctly.

It must only appear once, at the top of the page (before any HTML tags).

There are different document types. To display a web page correctly, the browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!doctype HTML>

Common <!DOCTYPE> Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

04:37

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users skim your pages by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.


HTML Paragraphs

The HTML <p> element defines a paragraph:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and after a paragraph.

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>
Try it Yourself »


02:46

HTML Styles

« Previous
Next Chapter »

HTML Styles

I am red

I am blue

Try it Yourself »

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

HTML Background Color

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

This example sets the background color for a page to powderblue:

Example

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

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

</body>
Try it Yourself »

HTML Text Color

The color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself »

HTML Fonts

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

Example

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself »

HTML Text Size

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

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »

HTML Text Alignment

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

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »

Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment
05:20

HTML Text Formatting

« Previous
Next Chapter »

Text Formatting

This text is bold

This text is italic

This is subscript and superscript

Try it Yourself »

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML <b> and <strong> Elements

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

Example

<b>This text is bold</b>
Try it Yourself »

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>
Try it Yourself »

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>
Try it Yourself »

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>
Try it Yourself »

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

Try it Yourself »

HTML <mark> Element

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

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

Try it Yourself »

HTML <del> Element

The HTML <del> element defines deleted (removed) text.

Example

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

Try it Yourself »

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

Example

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

Try it Yourself »

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example

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

Try it Yourself »

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example

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

Try it Yourself »

06:03

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

Note: A link does not have to be text. It can be an image or any other HTML element.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

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

Example

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
Try it Yourself »

The href attribute specifies the destination address (http://www.w3schools.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request.

Local Links

The example above used an absolute URL (A full web address).

A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example

<a href="html_images.asp">HTML Images</a>
Try it Yourself »

HTML Links - Colors

When you move the mouse over a link, two things will normally happen:

  • The mouse arrow will turn into a little hand
  • The color of the link element will change

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the default colors, by using styles:

Example

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Try it Yourself »

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it Yourself »

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

Example

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Try it Yourself »

HTML Links - Image as Link

It is common to use images as links:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:

<a href="#tips">Visit the Useful Tips Section</a>

Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Try it Yourself »


HTML Images

« Previous
Next Chapter »

JPG Images

GIF Images

PNG Images

Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
Try it Yourself »

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some_text" style="width:width;height:height;>

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the value of the alt attribute:

Example

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

The alt attribute is required. A web page will not validate correctly without it.

HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.

Image Size - Width and Height

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

The values are specified in pixels (use px after the value):

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Try it Yourself »

Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads.

Width and Height, or Style?

Both the width, height, and style attributes are valid in HTML5.

However, we suggest using the style attribute. It prevents internal or external styles sheets from changing the original size of images:

Example

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

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
Try it Yourself »

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

Example

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

Images on Another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

Example

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Try it Yourself »

Animated Images

The GIF standard allows animated images:

Example

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself »

Note that the syntax of inserting animated images is no different from non-animated images.

Using an Image as a Link

 To use an image as a link, simply nest the <img> tag inside the <a> tag:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Try it Yourself »

Image Maps

Use the <map> tag to define an image-map. An image-map is an image with clickable areas.

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:

Example

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Try it Yourself »

Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>'s element usemap attribute to point to an image-map


05:06

HTML Tables

« Previous
Next Chapter »

HTML Table Example

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Try it Yourself »

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
Try it Yourself »

Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example

table, th, td {
    border: 1px solid black;
}
Try it Yourself »

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Try it Yourself »

HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th, td {
    padding: 15px;
}
Try it Yourself »

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

th {
    text-align: left;
}
Try it Yourself »

HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
    border-spacing: 5px;
}
Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
Try it Yourself »

HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
Try it Yourself »

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Try it Yourself »

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}
Try it Yourself »

And add more styles:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Try it Yourself »

02:00

HTML Lists

« Previous
Next Chapter »

 HTML List Example

An Unordered List:

  • Item
  • Item
  • Item
  • Item

An Ordered 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:

Example

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

Try it Yourself »

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Example - Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Example - Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Example - Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Example - None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

>td >type="A">td >type="a">td >type="I">td >type="i"

TypeDescription
type="1"
The list items will be numbered with lowercase roman numbers

Numbers:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Uppercase Letters:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Lowercase Letters:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Uppercase Roman Numbers:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Lowercase Roman Numbers:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: 

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Try it Yourself »

Nested HTML Lists

List can be nested (lists inside lists):

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Try it Yourself »

Note: List items can contain new list, and other HTML elements, like images and links, etc.

Horizontal Lists

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a menu:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Try it Yourself »

Chapter Summary

  • Use the HTML <ul> element to define an unordered list
  • Use the CSS list-style-type property to define the list item marker
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to define the description data
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property float:left or display:inline to display a list horizontally
02:15

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.

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>

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

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but both style and class are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try it Yourself »

The <span> Element

The <span> element is often used as a container for some text.

The <span> element has no required attributes, but both style and class are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example

<h1>My <span style="color:red">Important</span> Heading</h1>

Try it Yourself »

HTML Grouping Tags

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)
07:53

The <form> Element

HTML forms are used to collect user input.

The <form> element defines an HTML form:

<form>
.
form elements
.
</form>

HTML forms contain form elements.

Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element has many variations, depending on the type attribute.

Here are the types used in this chapter:

TypeDescription
textDefines normal text input
radioDefines radio button input (for selecting one of many choices)
submitDefines a submit button (for submitting the form)
You will learn a lot more about input types later in this tutorial. 

Text Input

<input type="text"> defines a one-line input field for text input:

Example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Try it Yourself »

This is how it will look like in a browser:

First name: Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Try it Yourself »

This is how the HTML code above will be displayed in a browser:

 Male  Female  Other

The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

This is how the HTML code above will be displayed in a browser:

First name:
 
Last name:
 


The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

The common way to submit a form to a server, is by using a submit button.

Normally, the form is submitted to a web page on a web server.

In the example above, a server-side script is specified to handle the submitted form:

<form action="action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

<form action="action_page.php" method="get">

or:

<form action="action_page.php" method="post">

When to Use GET?

You can use GET (the default method):

If the form submission is passive (like a search engine query), and without sensitive information.

When you use GET, the form data will be visible in the page address:

action_page.php?firstname=Mickey&lastname=Mouse

GET is best suited to short amounts of data. Size limitations are set in your browser.

When to Use POST?

You should use POST:

If the form is updating data, or includes sensitive information (password).

POST offers better security because the submitted data is not visible in the page address.

The Name Attribute

To be submitted correctly, each input field must have a name attribute.

This example will only submit the "Last name" input field:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Try it Yourself »

This is how the HTML code above will be displayed in a browser:

Personal information:First name:
 
Last name:
 


HTML Form Attributes

An HTML <form> element, with all possible attributes set, will look like this:

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>

Test Yourself with Exercises!

Exercise 1 »   Exercise 2 »   Exercise 3 »   Exercise 4 »

Here is the list of <form> attributes:

AttributeDescription
accept-charsetSpecifies the charset used in the submitted form (default: the page charset).
actionSpecifies an address (url) where to submit the form (default: the submitting page).
autocompleteSpecifies if the browser should autocomplete the form (default: on).
enctypeSpecifies the encoding of the submitted data (default: is url-encoded).
methodSpecifies the HTTP method used when submitting the form (default: GET).
nameSpecifies a name used to identify the form (for DOM usage: document.forms.name).
novalidateSpecifies that the browser should not validate the form.
targetSpecifies the target of the address in the action attribute (default: _self).
You will learn more about attributes in the next chapters.

08:21

HTML5 Video

« Previous
Next Chapter »

HTML Video Example. Courtesy of Big Buck Bunny.

Try it Yourself »

Playing Videos in HTML

Before HTML5, there was no standard for showing videos on a web page.

Before HTML5, videos could only be played with a plug-in (like flash).

The HTML5 <video> element specifies a standard way to embed a video in a web page.

Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Element
<video>4.09.03.54.010.5

The HTML <video> Element

To show a video in HTML, use the <video> element:

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes.

If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.

Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.

Multiple <source> elements can link to different video files. The browser will use the first recognized format.

HTML <video> Autoplay

To start a video automatically use the autoplay attribute:

Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »

HTML Video - Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

>th >Browser

MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (from Opera 25)YESYES

HTML Video - Media Types

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML Video - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal 

Video courtesy of Big Buck Bunny.

Try it Yourself »

For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.

HTML5 Video Tags

TagDescription
<video>Defines a video or movie
<source>Defines multiple media resources for media elements, such as <video> and <audio>
<track>Defines text tracks in media players

Section 2: Css
10:09

CSS Margins

The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space outside the border.

With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

All the margin properties can have the following values:

  • auto - the browser calculates the margin
  • length - specifies a margin in px, pt, cm, etc.
  • % - specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

The following example sets different margins for all four sides of a <p> element:

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Try it Yourself »

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Example

p {
    margin: 100px 150px 100px 80px;
}
Try it Yourself »

So, here is how it works:

If the margin property has four values:

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

If the margin property has two values:

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

If the margin property has one value:

  • margin: 25px;
    • all four margins are 25px

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Try it Yourself »

The inherit Value

This example lets the left margin be inherited from the parent element:

Example

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Try it Yourself »

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal margins (left and right)! Only vertical margins (top and bottom)!

Look at the following example:

Example

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}
Try it Yourself »

In the example above, the <h1> element has a bottom margin of 50px. The <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

09:51

CSS Padding

The CSS padding properties are used to generate space around content.

The padding clears an area around the content (inside the border) of an element.

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All the padding properties can have the following values:

  • length - specifies a padding in px, pt, cm, etc.
  • % - specifies a padding in % of the width of the containing element
  • inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a <p> element: 

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Try it Yourself »

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Example

p {
    padding: 50px 30px 50px 80px;
}
Try it Yourself »

So, here is how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

If the padding property has one value:

  • padding: 25px;
    • all four paddings are 25px

Example

div.ex1 {
    padding: 25px 50px 75px 100px;
}

div.ex2 {
    padding: 25px 50px 75px;
}

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}
Try it Yourself »

active and hover
02:50
borders & width & height
05:00
font & text
05:34
css in table
04:19
03:11

The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute).

The position Property

The position property specifies the type of positioning method used for an element.

There are four different position values:

  • static
  • relative
  • fixed
  • absolute

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

Example

div.static {
    position: static;
    border: 3px solid #73AD21;
}
Try it Yourself »

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
Try it Yourself »

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
Try it Yourself »
This <div> element has position: fixed;

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

Here is a simple example:

This <div> element has position: relative;This <div> element has position: absolute;

Here is the CSS that is used:

Example

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
Try it Yourself »

Overlapping Elements

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

This is a heading


Because the image has a z-index of -1, it will be placed behind the text.

Example

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
Try it Yourself »

Navigation Bar
12:55
06:15

The look of an HTML table can be greatly improved with CSS:

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:


Example

table, th, td {
   border: 1px solid black;
}
Try it Yourself »

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:


Example

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Try it Yourself »

If you only want a border around the table, only specify the border property for <table>:


Example

table {
    border: 1px solid black;
}
Try it Yourself »

Table Width and Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:


Example

table {
    width: 100%;
}

th {
    height: 50px;
}
Try it Yourself »

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

The following example left-aligns the text in <th> elements:


Example

th {
    text-align: left;
}
Try it Yourself »

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:


Example

td {
    height: 50px;
    vertical-align: bottom;
}
Try it Yourself »

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:


Example

th, td {
    padding: 15px;
    text-align: left;
}
Try it Yourself »

Horizontal Dividers

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example

th, td {
    border-bottom: 1px solid #ddd;
}
Try it Yourself »

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

tr:hover {background-color: #f5f5f5}
Try it Yourself »

Striped Tables

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example

tr:nth-child(even) {background-color: #f2f2f2}
Try it Yourself »

Table Color

The example below specifies the background color and text color of <th> elements:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

th {
    background-color: #4CAF50;
    color: white;
}
Try it Yourself »

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

First NameLast NamePointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPoints
JillSmith505050505050505050505050
EveJackson949494949494949494949494
AdamJohnson676767676767676767676767

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Try it Yourself »

02:28

CSS Overflow

The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

The overflow property has the following values:

  • visible - Default. The overflow is not clipped. It renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
  • auto - If overflow is clipped, a scrollbar should be added to see the rest of the content

Note: The overflow property only works for block elements with a specified height.

Visible

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}
Try it Yourself »

Hidden

With the hidden value, the overflow is clipped, and the rest of the content is hidden:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
    overflow: hidden;
}
Try it Yourself »

Scroll

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
    overflow: scroll;
}
Try it Yourself »

Auto

The auto value is similar to scroll, only it add scrollbars when necessary:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
    overflow: auto;
}
Try it Yourself »

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content. overflow-y specifies what to do with the top/bottom edges of the content.

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}
Try it Yourself »

index layer view like facebook and youtube
04:37
add website to google webmaster
02:22

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Html Css Perl Java C# Seo CEH ismail taibi, Seo Expert Freelancer Perl Programer Exploit researcher

Hi Guys My name is ismail taibi From Algeria 21 years old , i'm a freelancer on fiverr and instructor on udemy I have 3 years perl programing and hacking , 2 years in teaching .web developing , and also SEO expert .. My goal as an instructor i want to help people to know some skills on web developing -penetration testing  - programing language and more .

Ready to start learning?
Take This Course