Scribd
Upload
31 views11 pages

2-Front End Development (HTML)

HTML developement

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views11 pages

2-Front End Development (HTML)

HTML developement

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Front-End Development

(HTML)

By:Muhammad Adeel Afzal


Frontend Development Languages
The front-end languages:
 HTML (Hyper Text Markup Language)
 CSS (Case cade Style)
 Javascript
 Ajax
 Boostrap
 Jquery
HTML
HTML stands for Hyper Text Markup Language. It is the
standard language used to create and design web pages on
the internet.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document
type, and helps browsers to display web pages
correctly.
 It must only appear once, at the top of the page
(before any HTML tags).
 The <!DOCTYPE> declaration is not case sensitive.
 The <!DOCTYPE> declaration for HTML5 is:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

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>
HTML Paragraphs & Links
Paragraphs are defined with the <p> tag:

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

Links are defined with the <a> tag:


Example
 <a href="https://www.desired-tehcs.com">This is a
link</a>
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=“desired.jpg" alt=“desired-techs.com“ width="104" height="142">
HTML Structure
HTML structure make using tables tags.

Example Code of basic structure


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<tr>
<td>Desired Technologies</td>
</tr>
</table>
</body>
</html>
HTML Formatting Elements
Formatting elements were designed to display special
types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML Media Elements
Media elements:
 <video> - for add video
 <audio> - for add audio
 <marquee> - for scroll text
 <iframe> - embed google maps / youtube videos
HTML Forms
An HTML form is used to collect user input. The
user input is most often sent to a server for
processing.
<input type="text"> Displays a single-line text input field

<input type="radio“> Displays a radio button (for selecting one


of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or


more of many choices)

<input type="submit"> Displays a submit button (for submitting


the form)

<input type="button"> Displays a clickable button

You might also like