Web development (html)

WEB DEVELOPMENT COURSE
(HTML)
INSTRUCTOR
SYED ALI

TOPICS
• HTML
• CSS
• JS (Java Script)
• PHP
• Bootstrap
• jQuery
• NodeJS

HYPER TEXT MARKUP
LANGUAGE (HTML)

WHAT IS HTML?
• HTML stands for (Hyper Text Markup Language)
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page

WHAT ARE HTML TAGS
HTML Tags are elements name surrounded by angle brackets:
<tagname> content goes here </tagname>
• HTML tags normally comes in pair like <p> and </p>
• The first tag in a pair is Start tag or opening tag, the second tag is the end tag or closing tag
• The end tag is written like the start tag, But with the forward slash ‘/’

WEB BROWSERS
The purpose of a web browser (Chrome, Edge, 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
<html>
</html>
<head>
<title>Page title</title>
</head>
<body>
</body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

THE <!DOCTYPE> DECLARATION
The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly
It must only appear once, at the top of the page (before html tags)
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is :
<!DOCTYPE html>

LEARN HTML USING NOTEPAD OR TEXTEDIT
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
STEP 1: OPEN NOTEPAD (PC)
1. Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
2. Windows 7 or earlier:
3. Open Start > Programs > Accessories > Notepad

HTML DOCUMENTS
All HTML documents must start with a document type declaration: <!Doctype html>
The HTML document itself begins with <html> and ends with </html>
The visible part of the HTML document is between <body> and </body>
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML HEADINGS
HTML headings are defined with the <h1> to <h6>
<h1> defines the most important heading . <h6> defines the least important heading:
Example:
<h1>This is heading 1</h1>

HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag:
Examples:
<p>This is another paragraph.</p>

HTML ATTRIBUTES
1. All HTML elements can have attributes
2. Attributes provide additional information about an element
3. Attributes are always specified in the start tag
4. Attributes usually come in name/value pairs like: name="value"

HTML LINKS
HTML links are defined with the <a> tag:
Example:
<a href=“https://www.google.com/></a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.

TITLE ATTRIBUTE
<tagname title=””></tagname>

HTML IMAGES
HTML images are defined with the <img> tag:
The source file (src),alternative text (alt),width,and height are provided as attributes:
Example:
<img src=“myimage.jpg” alt=“myImageName” width=“100px” height=“150px”>

HTML BUTTONS
HTML buttons are defined with the <button> tag:
Example:
<button>Click me</button>

HTML LISTS
HTML lists are defined with the <ul> (unordered / bullet list) or the <ol> (ordered/numbered list)
tag, followed by <li> tags (list items)
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

ATTRIBUTE STYLE
style="font-size:60px;“
<tagname style="property:value;">

STYLE ATTRIBUTE IN BODY TAG
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</body

STYLE ATTRIBUTE FOR FONT FAMILY
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

STYLE TAG FOR TEXT ALIGNMENT
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

TEXT FORMATTING ELEMENT
1. <b> Bold Text
2. <strong> Important text
3. <i> Italic Text
4. <em> Emphasized Text
5. <mark> Marked text
6. <small> Smaller Text
7. <del> Deleted Text
8. <ins> Inserted Text
9. <sub> Subscript Text
10. <sup> Superscript Text
Example:
My name is <b> Ali</b>
Output will be:
My name is Ali

SET IMAGE AS BODY BACKGROUND
For example I have a pic name mg.jpg . It can be added to body Background
<body style=“background-image: url(‘mg.jpg’)”>

IMAGE LINK
By Combining Image tag and link (anchor) tag we can make an Image Link
<a href=“google.com">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

PICTURE TAG
The <picture> element gives us more flexibility when specifying image resources
The <picture> element contains a number of <source> elements each referring to
different image sources. This way the browser can choose the image that best fits
the current view and/or device
Each <source> element have attributes describing when their image is the most suitable
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>

USING THE ID ATTRIBUTE
The id attribute is used by CSS or JavaScript to perform certain tasks for the element with the specific id
value.
In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>

HTML BLOCK AND INLINE 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). 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
The <div> element is often used as a container for other htmls elements.
The <div> elements has no required attributes like style , class and id
<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>

USING THE CLASS ATTRIBUTE
All HTML elements with the same class attribute will get the same style.
Like We have three div elements that points to the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of
Japan.</p>
</div>
</body>
</html>

HTML IFRAMES
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
IFRAME WIDTH AND HEIGHT
<iframe src=“thekillcode.com" height="200" width="300"></iframe>

HTML TABLES
HTML tables allow web authors to arrange data into rows and columns.
Example :

HTML JAVASCRIPT
Javascript code that is used in Html tag are called Html javascript
Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

HTML FILE PATHS
A file path describes the location of a file in a web site's folder structure.
Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the
current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the
current folder

HTML - THE HEAD ELEMENT
Html head element contains all the head elements:
Like title, style, meta ,link , script and base
Meta
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML - FORMS
An HTML form is used to collect user input. The user input can then be sent to a server for processing.
The form Element
The HTML <form> element defines a form that is used to collect user input:
<form>
</form>

INPUT ELEMENT
The input element is the most important element form element:
The input element displayed in several ways, depending on the type attribute.
Example:
<input type=“text”> Defines a single-line text input field
<input type=“radio”> Defines a radio button (for selecting one of many choices)
<input type=“submit”> Defines a submit button (for submitting the form)

HTML FORM ELEMENT
1. Input
2. Select
3. Textarea
4. Button
5. Fieldset
6. Leagend
7. Datalist
8. Output

INPUT TYPES
• <Input type=“text”>
• <Input type=“button”>
• <Input type=“checkbox”>
• <Input type=“color”>
• <Input type=“date”>
• <Input type=“datetime-local”>
• <Input type=“email”>
• <Input type=“file”>
• <Input type=“hidden”>
• <Input type=“image”>
• <Input type=“month”>
• <Input type=“number”>
• <Input type=“password”>
• <Input type=“radio”>
• <Input type=“range”>
• <Input type=“reset”>
• <Input type=“search”>
• <Input type=“submit”>
• <Input type=“tel”>
• <Input type=“time”>
• <Input type=“url”>
• <Input type=“week”>

INPUT ATTRIBUTE
• Value
• Readonly
• Disable
• Size
• Maxlength
• Max
• Min
• Multiple
• Pattern
• Placeholder
• Required
• Step
• Height
• Width
• List
• Auticomplete

INPUT FORM ATTRIBUTE
• Formaction
• Formmethod
• Formenctype
• Formtarget
• Formnovalidate
• novalidate

HTML CANVAS GRAPHICS
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>.
It shows four elements:
• a red rectangle
• a gradient rectangle
• a multicolor rectangle
• a multicolor text.
What is HTML Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The HTML <canvas> element is only a container for graphics. You must use JavaScript
to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

CANVAS EXAMPLES
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

HTML MULTIMEDIA
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML VIDEO
The HTML <video> element is used to show a video on a web page
The HTML <video> Element:
To show a video in HTML, use the <video> element:
<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>

HTML AUDIO
The HTML <audio> element is used to show a audio on a web page
The HTML < audio > Element:
To show a video in HTML, use the < audio > element:
< audio controls>
<source src="movie.mp3" type="video/mp3">
Your browser does not support the audio tag.
</ audio >

TAG LIST
Tag Discription
 Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner
of a document
<area> Defines an area inside an image map
<article> Defines an article

Web development (html)

More Related Content

What's hot (20)

Similar to Web development (html) (20)

Recently uploaded (20)

Web development (html)