Scribd
Upload
50 views

HTML - Rahul Chauhan (Incapp)

Uploaded by

kashish verma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

HTML - Rahul Chauhan (Incapp)

Uploaded by

kashish verma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

HTML(Hyper Text Markup Language)

Use to build web pages for website.

Develop by Sir Timothy John


Berners-Lee (TimBL).

First publicly available in 1991.

www.incapp.in Rahul Chauhan


Html Working

www.incapp.in Rahul Chauhan


Website
• A website is the collection of web pages that runs on a server.
• Website is accessed by client/user through a web browser
with an active internet connection.

www.incapp.in Rahul Chauhan


Tool Required

Visual Studio Code


Software

www.incapp.in Rahul Chauhan


Creating First Web Page
First.html OR First.htm

www.incapp.in Rahul Chauhan


Html <!Doctype>
• It is used to inform the browser about the document type.
• It is not case sensitive.

In html 5:
<!DOCTYPE html>

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

www.incapp.in Rahul Chauhan


Html Headings
• HTML has six levels of headings. <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
• While displaying any heading, browser adds line break
before and after that heading.

www.incapp.in Rahul Chauhan


Html Hyperlink
• It allow to navigate between Web pages by clicking on
words, phrases, and images.
• It is specified using HTML tag <a> (known as anchor tag).
• If we want to open page in new tab of the window, use
target attribute as target=“_blank”

<a href=“contact.html” > Contact us </a>

www.incapp.in Rahul Chauhan


Html Element Anatomy

www.incapp.in Rahul Chauhan


Html Comment
• It is used to add comment in the source code. Comment is
not displayed in the browsers.

<!-- This Code is doing XYZ job -->

Note: Do not use // as comment in html, // is JavaScript comment.

www.incapp.in Rahul Chauhan


Setting the Colors
• By using style attribute, we can provide colors.

<h1 style=“color:red” > My Heading1 </h1>


<h1 style=“background-color:yellow” > My Heading2 </h1>

www.incapp.in Rahul Chauhan


Working with Images
• We can insert any image in your web page by
using <img> tag.

<img src=“Image URL” ... attributes-list />

Attributes we can use:


source file (src) – Defines image url
alternative text (alt) – Defines image description
border – Defines border of image
width – Defines width of image
height – Defines height of image

www.incapp.in Rahul Chauhan


Html Favicon Image
• It is a small icon or logo found in front of the website.
• There are png, jpg, gif, svg and icon image formats
supported.
• This must comes under the <head> tag.

<link rel=" icon" href=“your_icon.ico” />

www.incapp.in Rahul Chauhan


Line-Break and Horizontal-Line
<br> tag is used for line break.
<hr> tag is used for horizontal line.

www.incapp.in Rahul Chauhan


<div> tag
• The <div> tag defines a division or a section in an
HTML document.

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

www.incapp.in Rahul Chauhan


Html Center Tag
• It is used to horizontally center any content of a page.

<center> content </center>

www.incapp.in Rahul Chauhan


Text Formatting
Bold Text-
<p>this <b>paragraph</b> has a word in bold.</p>

Italic Text-
<p>this <i>paragraph</i> has a word in italic.</p>

Underlined Text-
<p>this <u>paragraph</u> has a word underlined.</p>

Strike Text-
<p>this <strike>paragraph</strike> has a word strike through.</p>

www.incapp.in Rahul Chauhan


Text Formatting continue..
Marked Text-
<p>this <mark>paragraph</mark> has a word marked..</p>

Smaller Text-
<p>this <small>paragraph</small > has a word smaller than other
words..</p>

Big Text-
<p>this <big>paragraph</big > has a word larger than other
words..</p>

www.incapp.in Rahul Chauhan


Html List
HTML provides many ways for specifying lists of information.

Ordered List ( ol ) Unordered List ( ul )


1. Html • Html
2. Css • Css
3. Js • Js

Definition List ( dl )
Html
Hyper Text Markup Language
Css
Cascading Style Sheet
Js
Java Script

www.incapp.in Rahul Chauhan


Html Table
• The HTML table allows to arrange data into rows and columns of cells.
• The HTML tables are created using the <table> tag.
• The three elements for separating the head, body, and foot of a table
are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
• <th> tag is used to create table heading and <tr> tag is used to create
table rows and <td> tag is used to create data cells.

www.incapp.in Rahul Chauhan


Html Table continue..
• bgcolor attribute - We can set background color for whole
table or just for one cell.
• border attribute - We can set border size for table.
• colspan attribute, if we want to merge two or more columns
into a single column.
• rowspan attribute, if you want to merge two or more rows into
a single row.

www.incapp.in Rahul Chauhan


Html Character Entities
• Character entities are used to display reserved characters in HTML.
• Entity names are Case Sensitive.

www.incapp.in Rahul Chauhan


Html Form
• HTML Forms are required when you want to collect
some data from the site visitor.

<form action="URL" method="GET or POST” >


Form elements like input, textarea etc.
</form>

www.incapp.in Rahul Chauhan


Input Elements
<input type=“text”> A text field.
<input type=“email”> An email address field.
<input type=“number”> A number field.
<input type=“password”> A password field.
<input type=“range”> A range field.
<input type=“tel”> A phone number field.
<input type=“color”> A color picker field.
<input type=“url”> A website url field.
<input type=“date”> A date picker field.
<input type=“time”> A time picker field.
<input type=“month”> A month picker field.
<input type=“week”> A week picker field.
<input type=“radio”> An option button.
<input type=“checkbox”> A check box.

www.incapp.in Rahul Chauhan


Input Elements
<input type=“file”> A file-select field and a Browse
button for uploading files.
<input type=“submit”> A submit button.
<input type=“reset”> A reset button.
<input type=“image”> An image submit button.
<input type=“search”> A field for entering a search
string.
<input type=“button”> A clickable button.
<select> A drop-down list containing
<option> elements.
<textarea> A multiline text input field.
<button> A clickable button, which can be
set to button (default), reset, or
submit.

www.incapp.in Rahul Chauhan


Html Semantic Elements
• Semantic HTML elements are those that clearly describe
their meaning to both the browser and the designer.
• Elements such as <header>, <footer> ,
<nav> and <article> etc. are all considered semantic
because they accurately describe the purpose of the
element and the type of content that is inside them.

www.incapp.in Rahul Chauhan


With out Semantic Elements

www.incapp.in Rahul Chauhan


With Semantic Elements

www.incapp.in Rahul Chauhan


Html Semantic Elements Continue..
• List of some of the semantic elements in HTML.

www.incapp.in Rahul Chauhan


Html iframe
• Iframe tag is used to display a web page inside the web page.

<iframe src="https://www.incapp.in"
height="300" width="500"> </iframe>

www.incapp.in Rahul Chauhan


Showing a Video
<video width="400" height="300" controls> • File formats
<source src="myvideo.mp4" type="video/mp4"> supported are mp4,
This browser does not support the video tag. ogg and webm .
</video>

www.incapp.in Rahul Chauhan


Playing a YouTube Video
<iframe width="500" height="400"
src="https://www.youtube.com/embed/JOgK6Yl9tpI"
allowfullscreen >
</iframe>

www.incapp.in Rahul Chauhan


Playing an Audio
<audio controls>
<source src="loca.mp3" type="audio/mp3">
This browser does not support the audio tag.
</audio>

• File formats supported are mp3, ogg and wav .

www.incapp.in Rahul Chauhan


Meta Tag
• HTML meta tag specifies the metadata. Meta tag gives
information about a document in a variety of ways.
• This must comes under the <head> tag.

Define the author of a page:


<meta name="author" content= “Rahul Chauhan” />

Define a description of your web page:


<meta name="description" content= “This is portfolio page” />

Define keywords for search engines:


<meta name="keywords" content=“Best Website Designer, Website Creator” />

Refresh document every 5 seconds:


<meta http-equiv="refresh" content= “5” />

Redirect document after 5 seconds:


<meta http-equiv="refresh" content= “5; url = https://www.incapp.in” />

www.incapp.in Rahul Chauhan

You might also like