SlideShare a Scribd company logo
1 of 70
Download to read offline
HTML
Mohamed Loey
Agenda
Part I: Introduction
Part II: HTML Tags (Basic)
Part III: HTML Tags
Part V: HTML Forms
Agenda
Part I: Introduction
 What is HTML?
 Client & Server
 HTML Versions
 HTML Tags
 HTML Page Structure
 Web Browsers
 HTML Editors
What is HTML?
• HTML stands
for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and
plain text
• HTML documents are also called web pages
Client & Server
HTML Versions
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
• 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, with
a slash before the tag name
• Start and end tags are also called opening
tags and closing tags
• HTML tags normally come in pairs like <html>
and </html>
HTML Page Structure
Web Browsers
• A browser is a software program which
interprets the HTML documents and displays it
on the user’s screen.
• The purpose of a web browser (such as
Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and
display them as web pages.
Web Browsers
HTML Code Chrome Browser
HTML Editors
• Write HTML Using Notepad or TextEdit
• We believe using a simple text editor
(Notepad) is a good way to learn HTML.
• Follow the 4 steps below to create your first
web page with Notepad.
Step 1: Open Notepad
• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen).
• Click All Programs. Click Accessories.
• Click Notepad.
• To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at the
bottom left on your screen).
• Type Notepad.
Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
Step 3: Save the HTML Page
• Save the file on your computer.
• Select File -> Save as in the Notepad menu.
• When saving an HTML file, use either the .htm
or the .html file extension. There is no
difference, it is entirely up to you.
Step 4: View HTML Page in Your Browser
• Double-click your saved HTML file, and the
result will look much like this:
Professional HTML Editors
• HTML can be edited by using a professional
HTML editor like:
• Adobe Dreamweaver
• Netbeans
• CoffeeCup HTML Editor
• Microsoft Expression Web
Adobe Dreamweaver
Agenda
Part II: HTML Tags (Basic)
 HTML Head Tag
 HTML Body Tag
 HTML Basic Tags
 HTML Heading Tags
 HTML Paragraph Tag
 HTML Formatting Tags
 HTML Attributes
 HTML Styles
HTML Head Tag
• The <head> element is a container for all the
head elements. Elements inside <head> can
include scripts, instruct the browser where to
find style sheets, provide meta information,
and more.
• The following tags can be added to the head
section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
• The <title> tag defines the title of the
document.
HTML Body Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents
of an HTML document, such as text,
hyperlinks, images, tables, lists, etc.
HTML Body & Head Tag example
HTML Body & Head Tag
• On Chrome Browser
HTML Basic Tags
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br /> Inserts a single line break
<hr /> Defines a thematic change in the
content
<!--...--> Defines a comment
HTML Heading Tags
• HTML headings are defined with the <h1> to
<h6> tags.
• Example:
HTML Heading Tags
• On Chrome Browser
HTML Paragraph Tag
• HTML paragraphs are defined with the <p>
tag.
• Example:
HTML Paragraph Tag
• On Chrome Browser
HTML Formatting Tags
Tag Description
<u> Defines text that should be stylistically different from
normal text
<strong> Defines important text
<b> Defines bold text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<big> Not supported in HTML5. Use CSS instead. Defines big text
<font> Not supported in HTML5. Use CSS instead. Defines font,
color, and size for text
<center> Not supported in HTML5. Use CSS instead. Defines
centered text
HTML Formatting Tags
• HTML uses tags like <b> and <i> for
formatting output, like bold or italic text.
• Example:
HTML Formatting Tags
• On Chrome Browser
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional
information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs
like: name="value"
HTML Attributes
• Example:
HTML Attributes
• On Chrome Browser
HTML Styles
• Example:
HTML Styles
• On Chrome Browser
Agenda
Part III: HTML Tags
 HTML Lists Tags
 Unordered Lists Tags
 Ordered Lists Tags
 HTML Hyperlink Tag
 HTML Image Tag
 HTML Table Tags
 HTML Layouts
HTML Lists Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Unordered Lists Tags
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• Example:
Unordered Lists Tags
• On Chrome Browser
Ordered Lists Tags
• An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
• Example:
Ordered Lists Tags
• On Chrome Browser
HTML Hyperlink Tag
• The HTML <a> tag defines a hyperlink.
• A hyperlink (or link) is a word, group of words,
or image that you can click on to jump to
another document.
• When you move the cursor over a link in a
Web page, the arrow will turn into a little hand.
HTML Hyperlink Tag
• Example:
HTML Hyperlink Tag
• On Chrome Browser
HTML Image Tag
• In HTML, images are defined with the <img>
tag.
• To display an image on a page, you need to
use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the
image you want to display.
HTML Image Tag
• Example:
HTML Image Tag
• On Chrome Browser
HTML Table Tags
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Table Tags
• Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag.
(tr stands for table row)
• A row is divided into data cells with
the <td> tag. (td stands for table data)
HTML Table Tags
• Examlpe:
HTML Table Tags
• On Chrome Browser
HTML Layouts
• Most websites have put their content in
multiple columns (formatted like a magazine or
newspaper).
• Multiple columns are created by using <div>
or <table> elements.
• The div element is a block level element used
for grouping HTML elements.
• A simple way of creating layouts is by using
the HTML <table> tag.
HTML Layouts
• <div> example:
HTML Layouts
• On Chrome Browser
HTML Layouts
• <Table> Tag Example
HTML Layouts
• On Chrome Browser
Agenda
Part V: HTML Forms
 HTML Forms and Input Tags
 HTML Form Tag
 Text Fields
 Password Field
 Radio Buttons
 Checkboxes
 Submit Button
HTML Forms and Input Tags
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
HTML Form Tag
• HTML forms are used to pass data to a
server.
• An HTML form can contain input elements like
text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label
elements.
• The <form> tag is used to create an HTML
form
• The most important form element is the
<input> element.
Text Fields
• On Chrome Browser
Text Fields
• Example:
Password Field
• On Chrome Browser
Password Field
• Example:
Radio Buttons
• On Chrome Browser
Radio Buttons
• Example:
Checkboxes
• On Chrome Browser
Checkboxes
• Example:
Submit Button
• A submit button is used to send form data to
a server. The data is sent to the page specified
in the form's action attribute.
• On Chrome Browser
Submit Button
• Example:
THANK U

More Related Content

What's hot

An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 
Basic web architecture
Basic web architectureBasic web architecture
Basic web architectureRalu Mihordea
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptWalid Ashraf
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5IT Geeks
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxKADAMBARIPUROHIT
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic ElementsReema
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascriptFaysalAhammed5
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAjay Khatri
 

What's hot (20)

An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Basic web architecture
Basic web architectureBasic web architecture
Basic web architecture
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html ppt
Html pptHtml ppt
Html ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascript
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 

Viewers also liked

Perfil profesional
Perfil profesionalPerfil profesional
Perfil profesionalyinniliseth
 
Lecture 1 pendahuluan Bahasa Python
Lecture 1 pendahuluan Bahasa PythonLecture 1 pendahuluan Bahasa Python
Lecture 1 pendahuluan Bahasa PythonFathan Hakim
 
Advanced Web Design and Development - Spring 2005.doc
Advanced Web Design and Development - Spring 2005.docAdvanced Web Design and Development - Spring 2005.doc
Advanced Web Design and Development - Spring 2005.docbutest
 
Developing and implementing a new curriculum for information literacy
Developing and implementing a new curriculum for information literacyDeveloping and implementing a new curriculum for information literacy
Developing and implementing a new curriculum for information literacyJane Secker
 
Information literacy for knowledge society
Information literacy for knowledge societyInformation literacy for knowledge society
Information literacy for knowledge societyRadhika Rani
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmit Tyagi
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMayaLisa
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
State of the Word 2011
State of the Word 2011State of the Word 2011
State of the Word 2011photomatt
 

Viewers also liked (18)

HTML 5 and CSS 3
HTML 5 and CSS 3HTML 5 and CSS 3
HTML 5 and CSS 3
 
Perfil profesional
Perfil profesionalPerfil profesional
Perfil profesional
 
Lecture 1 pendahuluan Bahasa Python
Lecture 1 pendahuluan Bahasa PythonLecture 1 pendahuluan Bahasa Python
Lecture 1 pendahuluan Bahasa Python
 
Advanced Web Design and Development - Spring 2005.doc
Advanced Web Design and Development - Spring 2005.docAdvanced Web Design and Development - Spring 2005.doc
Advanced Web Design and Development - Spring 2005.doc
 
Just Enough Code
Just Enough CodeJust Enough Code
Just Enough Code
 
Indest
IndestIndest
Indest
 
Developing and implementing a new curriculum for information literacy
Developing and implementing a new curriculum for information literacyDeveloping and implementing a new curriculum for information literacy
Developing and implementing a new curriculum for information literacy
 
Li-Fi
Li-FiLi-Fi
Li-Fi
 
Information literacy for knowledge society
Information literacy for knowledge societyInformation literacy for knowledge society
Information literacy for knowledge society
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
CSS
CSSCSS
CSS
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
2017 03 open-access_public
2017 03 open-access_public2017 03 open-access_public
2017 03 open-access_public
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
State of the Word 2011
State of the Word 2011State of the Word 2011
State of the Word 2011
 

Similar to HTML Comprehensive Overview

learnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxlearnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxManuAbraham17
 
introduction-to-html hyper text markup .ppt
introduction-to-html hyper text markup  .pptintroduction-to-html hyper text markup  .ppt
introduction-to-html hyper text markup .pptubaidullah75790
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html BasicsMcSoftsis
 
SEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSky Infotech
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2Leo Mark Villar
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptSri Latha
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).pptF3ZONE1
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJGAMRITHA16
 
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeintrodution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeJamaicaCabrales
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptGezahegnHailu1
 
introdution-to-html programming and dhtml
introdution-to-html programming and dhtmlintrodution-to-html programming and dhtml
introdution-to-html programming and dhtmlsanthosh sriprada
 

Similar to HTML Comprehensive Overview (20)

Html
HtmlHtml
Html
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
html
htmlhtml
html
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxlearnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
introduction-to-html hyper text markup .ppt
introduction-to-html hyper text markup  .pptintroduction-to-html hyper text markup  .ppt
introduction-to-html hyper text markup .ppt
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
SEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.in
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
HTML
HTMLHTML
HTML
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
summary html.ppt
summary html.pptsummary html.ppt
summary html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).ppt
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJG
 
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeintrodution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html programming and dhtml
introdution-to-html programming and dhtmlintrodution-to-html programming and dhtml
introdution-to-html programming and dhtml
 

More from Mohamed Loey

Lecture 6: Deep Learning Applications
Lecture 6: Deep Learning ApplicationsLecture 6: Deep Learning Applications
Lecture 6: Deep Learning ApplicationsMohamed Loey
 
Lecture 5: Convolutional Neural Network Models
Lecture 5: Convolutional Neural Network ModelsLecture 5: Convolutional Neural Network Models
Lecture 5: Convolutional Neural Network ModelsMohamed Loey
 
Lecture 4: Deep Learning Frameworks
Lecture 4: Deep Learning FrameworksLecture 4: Deep Learning Frameworks
Lecture 4: Deep Learning FrameworksMohamed Loey
 
Lecture 4: How it Works: Convolutional Neural Networks
Lecture 4: How it Works: Convolutional Neural NetworksLecture 4: How it Works: Convolutional Neural Networks
Lecture 4: How it Works: Convolutional Neural NetworksMohamed Loey
 
Lecture 3: Convolutional Neural Networks
Lecture 3: Convolutional Neural NetworksLecture 3: Convolutional Neural Networks
Lecture 3: Convolutional Neural NetworksMohamed Loey
 
Lecture 2: Artificial Neural Network
Lecture 2: Artificial Neural NetworkLecture 2: Artificial Neural Network
Lecture 2: Artificial Neural NetworkMohamed Loey
 
Lecture 1: Deep Learning for Computer Vision
Lecture 1: Deep Learning for Computer VisionLecture 1: Deep Learning for Computer Vision
Lecture 1: Deep Learning for Computer VisionMohamed Loey
 
Design of an Intelligent System for Improving Classification of Cancer Diseases
Design of an Intelligent System for Improving Classification of Cancer DiseasesDesign of an Intelligent System for Improving Classification of Cancer Diseases
Design of an Intelligent System for Improving Classification of Cancer DiseasesMohamed Loey
 
Computer Security - CCNA Security - Lecture 2
Computer Security - CCNA Security - Lecture 2Computer Security - CCNA Security - Lecture 2
Computer Security - CCNA Security - Lecture 2Mohamed Loey
 
Computer Security - CCNA Security - Lecture 1
Computer Security - CCNA Security - Lecture 1Computer Security - CCNA Security - Lecture 1
Computer Security - CCNA Security - Lecture 1Mohamed Loey
 
Algorithms Lecture 8: Pattern Algorithms
Algorithms Lecture 8: Pattern AlgorithmsAlgorithms Lecture 8: Pattern Algorithms
Algorithms Lecture 8: Pattern AlgorithmsMohamed Loey
 
Algorithms Lecture 7: Graph Algorithms
Algorithms Lecture 7: Graph AlgorithmsAlgorithms Lecture 7: Graph Algorithms
Algorithms Lecture 7: Graph AlgorithmsMohamed Loey
 
Algorithms Lecture 6: Searching Algorithms
Algorithms Lecture 6: Searching AlgorithmsAlgorithms Lecture 6: Searching Algorithms
Algorithms Lecture 6: Searching AlgorithmsMohamed Loey
 
Algorithms Lecture 5: Sorting Algorithms II
Algorithms Lecture 5: Sorting Algorithms IIAlgorithms Lecture 5: Sorting Algorithms II
Algorithms Lecture 5: Sorting Algorithms IIMohamed Loey
 
Algorithms Lecture 4: Sorting Algorithms I
Algorithms Lecture 4: Sorting Algorithms IAlgorithms Lecture 4: Sorting Algorithms I
Algorithms Lecture 4: Sorting Algorithms IMohamed Loey
 
Algorithms Lecture 3: Analysis of Algorithms II
Algorithms Lecture 3: Analysis of Algorithms IIAlgorithms Lecture 3: Analysis of Algorithms II
Algorithms Lecture 3: Analysis of Algorithms IIMohamed Loey
 
Algorithms Lecture 2: Analysis of Algorithms I
Algorithms Lecture 2: Analysis of Algorithms IAlgorithms Lecture 2: Analysis of Algorithms I
Algorithms Lecture 2: Analysis of Algorithms IMohamed Loey
 
Algorithms Lecture 1: Introduction to Algorithms
Algorithms Lecture 1: Introduction to AlgorithmsAlgorithms Lecture 1: Introduction to Algorithms
Algorithms Lecture 1: Introduction to AlgorithmsMohamed Loey
 
Convolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningConvolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningMohamed Loey
 
Deep Learning - Overview of my work II
Deep Learning - Overview of my work IIDeep Learning - Overview of my work II
Deep Learning - Overview of my work IIMohamed Loey
 

More from Mohamed Loey (20)

Lecture 6: Deep Learning Applications
Lecture 6: Deep Learning ApplicationsLecture 6: Deep Learning Applications
Lecture 6: Deep Learning Applications
 
Lecture 5: Convolutional Neural Network Models
Lecture 5: Convolutional Neural Network ModelsLecture 5: Convolutional Neural Network Models
Lecture 5: Convolutional Neural Network Models
 
Lecture 4: Deep Learning Frameworks
Lecture 4: Deep Learning FrameworksLecture 4: Deep Learning Frameworks
Lecture 4: Deep Learning Frameworks
 
Lecture 4: How it Works: Convolutional Neural Networks
Lecture 4: How it Works: Convolutional Neural NetworksLecture 4: How it Works: Convolutional Neural Networks
Lecture 4: How it Works: Convolutional Neural Networks
 
Lecture 3: Convolutional Neural Networks
Lecture 3: Convolutional Neural NetworksLecture 3: Convolutional Neural Networks
Lecture 3: Convolutional Neural Networks
 
Lecture 2: Artificial Neural Network
Lecture 2: Artificial Neural NetworkLecture 2: Artificial Neural Network
Lecture 2: Artificial Neural Network
 
Lecture 1: Deep Learning for Computer Vision
Lecture 1: Deep Learning for Computer VisionLecture 1: Deep Learning for Computer Vision
Lecture 1: Deep Learning for Computer Vision
 
Design of an Intelligent System for Improving Classification of Cancer Diseases
Design of an Intelligent System for Improving Classification of Cancer DiseasesDesign of an Intelligent System for Improving Classification of Cancer Diseases
Design of an Intelligent System for Improving Classification of Cancer Diseases
 
Computer Security - CCNA Security - Lecture 2
Computer Security - CCNA Security - Lecture 2Computer Security - CCNA Security - Lecture 2
Computer Security - CCNA Security - Lecture 2
 
Computer Security - CCNA Security - Lecture 1
Computer Security - CCNA Security - Lecture 1Computer Security - CCNA Security - Lecture 1
Computer Security - CCNA Security - Lecture 1
 
Algorithms Lecture 8: Pattern Algorithms
Algorithms Lecture 8: Pattern AlgorithmsAlgorithms Lecture 8: Pattern Algorithms
Algorithms Lecture 8: Pattern Algorithms
 
Algorithms Lecture 7: Graph Algorithms
Algorithms Lecture 7: Graph AlgorithmsAlgorithms Lecture 7: Graph Algorithms
Algorithms Lecture 7: Graph Algorithms
 
Algorithms Lecture 6: Searching Algorithms
Algorithms Lecture 6: Searching AlgorithmsAlgorithms Lecture 6: Searching Algorithms
Algorithms Lecture 6: Searching Algorithms
 
Algorithms Lecture 5: Sorting Algorithms II
Algorithms Lecture 5: Sorting Algorithms IIAlgorithms Lecture 5: Sorting Algorithms II
Algorithms Lecture 5: Sorting Algorithms II
 
Algorithms Lecture 4: Sorting Algorithms I
Algorithms Lecture 4: Sorting Algorithms IAlgorithms Lecture 4: Sorting Algorithms I
Algorithms Lecture 4: Sorting Algorithms I
 
Algorithms Lecture 3: Analysis of Algorithms II
Algorithms Lecture 3: Analysis of Algorithms IIAlgorithms Lecture 3: Analysis of Algorithms II
Algorithms Lecture 3: Analysis of Algorithms II
 
Algorithms Lecture 2: Analysis of Algorithms I
Algorithms Lecture 2: Analysis of Algorithms IAlgorithms Lecture 2: Analysis of Algorithms I
Algorithms Lecture 2: Analysis of Algorithms I
 
Algorithms Lecture 1: Introduction to Algorithms
Algorithms Lecture 1: Introduction to AlgorithmsAlgorithms Lecture 1: Introduction to Algorithms
Algorithms Lecture 1: Introduction to Algorithms
 
Convolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningConvolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep Learning
 
Deep Learning - Overview of my work II
Deep Learning - Overview of my work IIDeep Learning - Overview of my work II
Deep Learning - Overview of my work II
 

Recently uploaded

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 

Recently uploaded (20)

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.
 

HTML Comprehensive Overview

  • 2. Agenda Part I: Introduction Part II: HTML Tags (Basic) Part III: HTML Tags Part V: HTML Forms
  • 3. Agenda Part I: Introduction  What is HTML?  Client & Server  HTML Versions  HTML Tags  HTML Page Structure  Web Browsers  HTML Editors
  • 4. What is HTML? • HTML stands for Hyper Text Markup Language • HTML is a markup language • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
  • 6. HTML Versions Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012
  • 7. HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • 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, with a slash before the tag name • Start and end tags are also called opening tags and closing tags • HTML tags normally come in pairs like <html> and </html>
  • 9. Web Browsers • A browser is a software program which interprets the HTML documents and displays it on the user’s screen. • The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
  • 10. Web Browsers HTML Code Chrome Browser
  • 11. HTML Editors • Write HTML Using Notepad or TextEdit • We believe using a simple text editor (Notepad) is a good way to learn HTML. • Follow the 4 steps below to create your first web page with Notepad.
  • 12. Step 1: Open Notepad • To open Notepad in Windows 7 or earlier: • Click Start (bottom left on your screen). • Click All Programs. Click Accessories. • Click Notepad. • To open Notepad in Windows 8 or later: • Open the Start Screen (the window symbol at the bottom left on your screen). • Type Notepad.
  • 13. Step 2: Write Some HTML • Write or copy some HTML into Notepad.
  • 14. Step 3: Save the HTML Page • Save the file on your computer. • Select File -> Save as in the Notepad menu. • When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
  • 15. Step 4: View HTML Page in Your Browser • Double-click your saved HTML file, and the result will look much like this:
  • 16. Professional HTML Editors • HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Netbeans • CoffeeCup HTML Editor • Microsoft Expression Web
  • 18. Agenda Part II: HTML Tags (Basic)  HTML Head Tag  HTML Body Tag  HTML Basic Tags  HTML Heading Tags  HTML Paragraph Tag  HTML Formatting Tags  HTML Attributes  HTML Styles
  • 19. HTML Head Tag • The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. • The <title> tag defines the title of the document.
  • 20. HTML Body Tag • The <body> tag defines the document's body. • The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
  • 21. HTML Body & Head Tag example
  • 22. HTML Body & Head Tag • On Chrome Browser
  • 23. HTML Basic Tags Tag Description <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br /> Inserts a single line break <hr /> Defines a thematic change in the content <!--...--> Defines a comment
  • 24. HTML Heading Tags • HTML headings are defined with the <h1> to <h6> tags. • Example:
  • 25. HTML Heading Tags • On Chrome Browser
  • 26. HTML Paragraph Tag • HTML paragraphs are defined with the <p> tag. • Example:
  • 27. HTML Paragraph Tag • On Chrome Browser
  • 28. HTML Formatting Tags Tag Description <u> Defines text that should be stylistically different from normal text <strong> Defines important text <b> Defines bold text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <big> Not supported in HTML5. Use CSS instead. Defines big text <font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <center> Not supported in HTML5. Use CSS instead. Defines centered text
  • 29. HTML Formatting Tags • HTML uses tags like <b> and <i> for formatting output, like bold or italic text. • Example:
  • 30. HTML Formatting Tags • On Chrome Browser
  • 31. HTML Attributes • HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value"
  • 33. HTML Attributes • On Chrome Browser
  • 35. HTML Styles • On Chrome Browser
  • 36. Agenda Part III: HTML Tags  HTML Lists Tags  Unordered Lists Tags  Ordered Lists Tags  HTML Hyperlink Tag  HTML Image Tag  HTML Table Tags  HTML Layouts
  • 37. HTML Lists Tags Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list <dl> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list
  • 38. Unordered Lists Tags • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. • Example:
  • 39. Unordered Lists Tags • On Chrome Browser
  • 40. Ordered Lists Tags • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. • Example:
  • 41. Ordered Lists Tags • On Chrome Browser
  • 42. HTML Hyperlink Tag • The HTML <a> tag defines a hyperlink. • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. • When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
  • 44. HTML Hyperlink Tag • On Chrome Browser
  • 45. HTML Image Tag • In HTML, images are defined with the <img> tag. • To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
  • 46. HTML Image Tag • Example:
  • 47. HTML Image Tag • On Chrome Browser
  • 48. HTML Table Tags Tag Description <table> Defines a table <caption> Defines a table caption <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table
  • 49. HTML Table Tags • Tables are defined with the <table> tag. • A table is divided into rows with the <tr> tag. (tr stands for table row) • A row is divided into data cells with the <td> tag. (td stands for table data)
  • 51. HTML Table Tags • On Chrome Browser
  • 52. HTML Layouts • Most websites have put their content in multiple columns (formatted like a magazine or newspaper). • Multiple columns are created by using <div> or <table> elements. • The div element is a block level element used for grouping HTML elements. • A simple way of creating layouts is by using the HTML <table> tag.
  • 54. HTML Layouts • On Chrome Browser
  • 56. HTML Layouts • On Chrome Browser
  • 57. Agenda Part V: HTML Forms  HTML Forms and Input Tags  HTML Form Tag  Text Fields  Password Field  Radio Buttons  Checkboxes  Submit Button
  • 58. HTML Forms and Input Tags Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element
  • 59. HTML Form Tag • HTML forms are used to pass data to a server. • An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. • The <form> tag is used to create an HTML form • The most important form element is the <input> element.
  • 60. Text Fields • On Chrome Browser
  • 62. Password Field • On Chrome Browser
  • 64. Radio Buttons • On Chrome Browser
  • 68. Submit Button • A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. • On Chrome Browser