Scribd
Upload
15 views

Null 2

This document provides notes on basic HTML tags and structures for creating web pages. It covers tags for page structure like <html>, <head>, <body>; text formatting tags; image tags; links; lists; tables; and forms. Form elements discussed include text fields, textareas, buttons, checkboxes and radioboxes. The document includes examples and descriptions of attributes for each tag type.

Uploaded by

beyexot408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Null 2

This document provides notes on basic HTML tags and structures for creating web pages. It covers tags for page structure like <html>, <head>, <body>; text formatting tags; image tags; links; lists; tables; and forms. Form elements discussed include text fields, textareas, buttons, checkboxes and radioboxes. The document includes examples and descriptions of attributes for each tag type.

Uploaded by

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

HTML

IMPORTANT
NOTES
QUICK AND EASY TO REMEMBER NOTES

by
TELUGU GYAAN
HTML NOTES - HTML DOCUMENT STRUCTURE

HTML Document Structure

01
HTML NOTES - BASIC HTML PAGE TAGS

Basic HTML Page Tags

Tag Description

<!DOCTYPE It is used to tell the browser the type of document.

html> <html> This tag is container for all other HTML tags.

<head> Tag to define the head portion of the document.

<title> It is used to set title of the document shown on the browser's


tab
<body> contains all content of HTML document that is shown
<body>
to the user
<p> is used to define the paragraph
<p>

*Note: In HTML every tag must have an end tag, For Example, if you are inserting a
paragraph with <p> it should have an end tag </p>, There are some exception tags that
don't have an end tag like <!DOCTYPE html>, <br>.

02
HTML NOTES - HTML TEXT FORMATTING

HTML Text Formatting


Tag Description

<h?>Heading<h?> Used to insert headings, h1(Largest) to h6 (Smallest)

<b> To make a text bold

<i> To make a text italic

<strong> Used to show important text, makes a text bold

<em> Used to define emphasised text

<mark> Used to highlight the text

<s> To strikethrough the text

<code> Used to insert the source code in the document

<cite> To insert title of creative work like images, audio, video, etc.

<time> Used to insert the date and time

<address> Used to insert the address

<sub> Defines subscript text

<sup> Defines superscript text

<blockquote> Block Quote an element from another source within a


document
Defines pre formated text
<pre>

HTML Text Formatting Example


The below is code demonstrates how to use HTML text formatting tags:

03
HTML NOTES - HTML TEXT FORMATTING

04
HTML NOTES - HTML TEXT FORMATTING

Output

HTML Tables Tags

Tag Description

<table> Define a table

<thead> Used to group table header

<tbody> content Container for table

<th> content

<tr> To insert header cell within row

<td> To Insert a row within table

To insert a table cell within row

05
HTML NOTES - HTML TABLE

Table Example

Output:

06
HTML NOTES - HTML IMAGES

HTML Images
Images make websites beautiful and easy to process information. To add
images to HTML pages <img> tag is used, img tag has the following
important attributes that are needed to format an image.

Image Description

Attributes src Used to specify the path of image file

alt Used to show an alternative name to the image if the image is


not loaded and helpful for Search Engine Optimization.
Used to specify the height of the image
heigh
Used to specify the width of the image
t

width

Output:

07
HTML NOTES - HTML LINKS

HTML Links
HTML links are a powerful way to allow seamless navigation of pages
on your website. When a user clicks on the link, the browser
automatically follows it and loads the link URL.

To insert the links in the webpage we have to use the <a> tag.
Following are the important attributes that are required to insert the
links.
Anchor tag Description

attr href Used to specify the link

target Used to specify where link should be open, Value = _blank,


_parent, _self, _top
Used to specify the target file if you want to add download file
download
feature

08
HTML NOTES - HTML LISTS

HTML Lists
Using HTML it's possible to display information in a list. This makes it
easier to understand the data. HTML provides 3 ways to specify the
information.
List Description

Type To insert ordered list in the web page

<ol> To insert unordered list in the web page

<ul> To insert description list in the web page, It is arranged in key


value pair
<dl>

In above example <li> is used to insert a list item, <dt> means


data term(key) and <dd> data description(value).

09
HTML NOTES - HTML LISTS

HTML Lists Output

10
HTML NOTES - HTML FORM

HTML Forms
Suppose your client or boss told you to design a webpage that takes input
from the user. In that scenario, you will need to add a form to the
webpage.

To add the form to the webpage we have to use the <form> element.
Following are the attributes used for the form tag.

Attributes Description

name This attribute defines name of the form, it should be unique

action Path to backend script, which process the data

method Used to set HTTP method to submit data to the backend,


There are 2 types of HTTP methods: GET and POST
Used to define how browser should encode the data before
enctype sending it to the server, Values for this attributes are:
application/x-www-form-urlencoded: The default value.
multipart/form-data: If form contains input type file then
this tag is used
text/plain: Introduced in HTML5 for debugging.

Form Field Types


Text Fields
Buttons
Checkbox
Radiobox
Select options
control File select
Hidden inputs
Labels

11
HTML NOTES - HTML FORM

Text Fields
Type Description

text Used to accept single line text

password data Used to accept password

Text Fields Attributes


Attribute Description

type Type of the text field: text or password

name Name of the text field, It should be unique

id Id of the text field, It should be unique

size Width of the text fields in terms of characters

Multi-Line Text Field


Element Description

<textarea> Used to define multiple line text field to accept the data like
user address and description of the product

Multi-Line Text Field Attributes


Attribute Description

name Used to set name of the field

id Used to set the id of the field

rows Used to set number of rows for text area input

cols Used to set number of columns for text area input

12
HTML NOTES - HTML FORM

Form Text Field Example

Output:

DEVELOPER UPDATES 13
HTML NOTES - HTML FORM

Buttons
If you want to add buttons in the form like Submit, Save, Update and
Cancel, You will need to use <button> tag to add the button in the form.

Button Attributes
Attribute Description

type Type of the button, Value for this attribute will be

name button To define the name of the button

id To define the id of the button

onClick Javascript function to be called when user clicks on the


button

Checkbox
If you want to add feature of the selecting the multiple options like your
favourite subjects, your favourite food, place would you like to travel then
checkbox field is used in the form. For grouping checkbox there should be
same name for all checkbox.

Checkbox Attributes
Attribute Description

type Used to set type of the input, its value will be checkbox

name To define the name of the checkbox

id To define the id of the checkbox

onChang Javascript function to be called when user checks or uncheck


the checkbox
e
value To set the value of the checkbox, Like if you are adding field to
choose your favourite food the value will be food name
To set if checkbox is checked or not, If you add this attribute
checked in the element checkbox will be selected by default

DEVELOPER UPDATES 14
HTML NOTES - HTML FORM

Radio Button
If you want to give the option to select only one field from the multiple
options available to the user then the radio button is used.

For example, there will be multiple genders but we allow users to select
only one gender. For grouping radio buttons there should be same name
for all checkbox.
Radio Button Attributes
Attribute Description

type Used to set type of the input, its value will be radio

name To define the name of the radio button

id To define the id of the radio button

onChang Javascript function to be called when user checks or uncheck


the radio button
e
value To set the value of the radio button

checked To set if the radio button is checked or not, If you add this
attribute in the element radio button will be selected by
default

Select Option Control


If you have a long list of options and you have to allow select only one
option then there you will use select input type instead of showing a lot
of radio buttons.

For example, suppose you want to add a list of the cities to select user
city, then you will choose select form control instead of radio buttons.

DEVELOPER UPDATES 15
HTML NOTES - HTML FORM

File Input
If you want to add file upload feature then file input is used, For example
suppose you have to add the feature of setting profile pic of the user then you
will have to use file input type.

While adding file input control, never forget to set encytype =


"multipart/form-data" attribute in the form element.

Hidden Inputs
If you want to add/set the value in the form that can be used later or can be
sent to the server without showing it to the user at that time hidden fields are
used.

For example, You will need a user id for front-end operation but you don't
have to show the user id to the user then you will have to use a hidden input
field.

Form Labels
In the above form example, we set the input field name in plain text format,
like name, and password, But there is a better option to set a label for the
input field in the form.

We can use <label> to set a label for the input field, So when users click on the
label the form field automatically gets selected. and we can format that label
text. For this feature we will have to set "for" attribute in the label and it
should match with input field id.

DEVELOPER UPDATES 16
HTML NOTES - HTML FORM

Form Fields Example

DEVELOPER UPDATES 17
HTML NOTES - HTML5 NEW INPUT ELEMENTS

HTML5 New Input Elements


In the updated version of HTML5, they introduced new tags that are very
useful for web developers and make web developers work easy. Below are the
new input type attributes:

Input Description

Attribute date To allow user to select date from drop-down calendar

DateTime To allow user to select date and time at same time

time To allow user to select the time

email Used to add email field

tel Used to add phone number field

color Used to add color picker to select color

number Used to add number field that accepts integer and

range number Used to add range slider

url Used to saedtd t yUpReL o ffi etlhde input, its value will be

radio

DEVELOPER UPDATES 18
HTML NOTES - HTML5 NEW INPUT ELEMENTS

Output

Comment in HTML
To comment the code in html the following syntax is used.

DEVELOPER UPDATES 19
HTML NOTES - HTML LAYOUT

HTML Layout
In the above examples, we created HTML pages without structuring pages
well. To make a good website experience for the user HTML provides
elements to design an HTML layout to make a website look awesome.

In the very first we have seen the structure of the HTML webpage, Here we
will go through all tags with example

Tag Description

<div> This is most used tag for designing HTML pages, This is
container for HTML elements. Using div we can divide the
HTML pages into different blocks and add style to each div.

<section> This tag allows us to divide page in sections

<p> This tag allows us to define paragraph

<header> This tag allows us to add header in the webpage

<footer> This tag allows us to add footer in the webpage

<aside> The HTML aside tag identifies content that is not essential to
the page and should be displayed in a separate box or beside
the main content.

This tag is used to add horizontal line between two elements


<hr
This tag is used to add line break
>

<br

>

DEVELOPER UPDATES 20
HTML NOTES - HTML LAYOUT EXAMPLE

HTML Layout Example

DEVELOPER UPDATES 21
HTML NOTES - VIDEO IN HTML PAGE

Video in HTML Page


If you want to add video in HTML page, we can do this using <video> tag,
Let's see an example of adding video in the webpage.

The control attributes add video controls like play, pause, and volume. width
and height are used to define video width and height. source allows us to
specify video files we can add alternative files using this tag.

To add the autoplay feature, add the "autoplay" attribute in the audio tag.

DEVELOPER UPDATES 22
HTML NOTES - AUDIO IN HTML PAGE

Audio in HTML Page


If you want to add audio in HTML page, we can do this using <audio> tag,
Let's see an example of adding audio in the webpage.

The control attributes add audio controls like play, pause, and volume. source
allows us to specify audio files we can add alternative files using this tag.

To add the autoplay feature, add the "autoplay" attribute in the audio tag.

DEVELOPER UPDATES 23
HTML NOTES - ADDING CSS TO HTML

Adding CSS to HTML


The Cascading Style Sheets (CSS) is a code that is used to format the layout of
your website or web page. It can be used in conjunction with HTML to style
your website.

CSS helps you make changes to the appearance of elements within a web
page such as the text, fonts, colors, images, and spacing. You can also create
and add custom fonts.

There are 3 ways given below to add CSS to the HTML page:

Way Description

External To add external CSS file using <link> tag

Internal To add CSS in HTML page in the head section using <style>

Inline tag To add css inside HTML tag using style attribute

DEVELOPER UPDATES 24
HTML NOTES - ADDING CSS TO HTML

Adding JavaScript to HTML


JavaScript is a language that is widely used for creating interactive web
pages. You can add attractive and dynamic elements such as menus, popup
windows, photo galleries, and delivery charges to your site using JavaScript
programming.

JavaScript is executed in the user's web browser so developers use JavaScript


as much possible as they can to make the user experience better.

DEVELOPER UPDATES 25
Thank You!

Follow our channels on Instagram to get daily updates and


learn something new:

@richwebdeveloper
@new_javascript
@developerupdates

www.developerupdates.com @developerupdates

You might also like