Scribd
Upload
24 views

HTML

Uploaded by

PUTTARAJ C D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

HTML

Uploaded by

PUTTARAJ C D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

WEB : the network that allow us to exchange data between 2 computers.

network : it will consist of 2 or more systems in order to shre the data.

Internet : it is a vast network that can connect computers all over the world.

browser : it is an appliucation software for accesssing the web pages

HTTP : hyper text transfer protocol.

WEB page : it is a document, commonly created using HTML, that is viewed in browser

HTML 5

introduction

structure of html

tags

attributes

List

how to create

attributes

example

Audio/video

attributes

how to insert audio content

how to insert video content

I-frames

how to create the nested web pages


how to apply them

TABLE

how to create the table

attributes of table

forms

how to create

attributes

examples

client side image maping

different shapes

rect

circlepoly

SVG(scalable vector graphics)

how to define svg

attributes
HTML

What is HTMl ?

- the full form of html is HYPER TEXT MARKUP LANGUAGE.

- We are using the html to creaye the structure of the web pages.

-currently we are using HTML 5.

- HTML 5 is case in sensitive.

- with the help of html5 we can create only static web pages.

- we have to save the file with .html extension to run in the browser.

Structure of the HTML

<!doctype html> // it will always showing the current version of html.

<html> // will represent the root element of a page

<head>

</head> // is known as invisible part. because we are able to

hidden the property.

<body>

</body> // is known as visible part. What all the things we

will write it will be visible for the users.

</html>

What is a tags ?

-inside the < > all the predefined keywords in html , we'll call it it as tags.

we are having 2 types of tags.

1) single tag : if you open any tag , then their is no need of closing that tag .

ex : </br>

2) double tag : if you open any tag , then mandatorily you should close that tag .

ex : <head> </head>, <body> </body>


Types of <head> tag :

1. <title></title> = If wewants to provide any page name we

have to call it using title tag.

2. <link> = If we wants to link one page to another page we have

to call link tag.

3. <style></style> = To applying css

4. <script></script> = To call javascript

5. <meta></meta> = The subset of head tag. Which will provide to

hide some property from the users.

Attributes :

- It will helps to add some extra effects on the html properties.

- For each and every tags we are having different attributes.

Body tag attribute :

Attributes Parameter

1. bgcolor color code/color name

2. background image name

3. text color code/color name

Heading tags :

we have 6 types of heading tags .

1) <h1> </h1> : biggest

2) <h2> </h2>

3) <h3> </h3>

4) <h4> </h4>
5) <h5> </h5>

6) <h6> </h6> : smallest

Attributes of heading tag

-Align is the only attribute of heading tag.

Align=“left” , “right” , “center”.

Default will be left.

syntax : <h1 align=“right”> text </h1>

Paragraph Tag :

Paragraphs allow you to add text to a document in such a way that it will automatically adjust the end of

o suite the window size of the browser in which it is being displayed. Each line of text will stretch the

entire

length of the window.

Break tag :

Line breaks allow you to decide where the text will break on a line or continue to the end of the window.

A <BR> is an empty Element, meaning that it may contain attributes but it does not contain content.

The <BR> element does not have a closing tag.

Line breaks allow you to decide where the text will break on a line or continue to the end of the window.

A <BR> is an empty Element, meaning that it may contain attributes but it does not contain content.

The <BR> tag does not have a closing tag.

Horizontal rule <hr> :

The <HR> element causes the browser to display a horizontal line (rule) in your document.

<HR> does not use a closing tag, </HR>.


Character Formatting

For bold text we have have <b > </b>

For Text to be underlined we have <u> </u>

If we need a italic text , we have <i> </i>

If text needs to be strong , we have <strong> </strong>

If my text has to be emphasized <em> </em>

For bigger text <BIG> </BIG>

For text to be striked <STRIKE> <STRIKE>

for smaller text <SMALL> </SMALL>

if our text has to be present below the usual text <SUB> </SUB>

if our text has to be present above the usual text <SUP> </SUP>

Image tag :

<img>:

- The full form is image tag.

- If we wants to create some images inside one page we have to call

<img> tag.

Attributes Parameter

1. src(source) image name/image path

2. height px

3. width px

Hyperlink :

- If we wants to create the relation between one page to

another page we have to create hyperlink.


- With the help of anchor tag we are able to create the hyperlink.

- Anchor tag we are using to internally connect between one

page to another page.

- <a></a> is known as anchor tag.

Attributes Parameter

1. href page name

2. target parent(default),blank

Scrolling Text

<marquee></marquee>

- If we wants to create scrolling data we have to call marquee tag.

Attributes Parameter

1. bgcolor color code/name

2. height px, %

3. width px, %

4. direction left(default),right,up,down

5. behavior scroll(default),, alternate

6. scrollamount number

7. scrolldelay seconds

8. loop any number

Special Characters & Symbols

These Characters are recognized in HTML as they begin with an ampersand and end with with a semi-
colon e.g. &value;

The value will either be an entity name or a standard ASCII character number. They are called escape
sequences.

The next table represents some of the more commonly used special characters.
List

In this chapter you will learn how to create a variety of lists.

Objectives

Upon completing this section, you should be able to

Create an unordered list.

Create an ordered list.

1. Order list(<ol></ol>): Items in this list are numbered automatically by the browser.

Default types of order list is number.

Attributes Parameters

1. types Number(default),A-Z,a-z,I,i

2. start any number

2. Unorder list(<ul></ul>) : Items in this list start with a list mark such as a bullet. Browsers will usually
change the list mark in nested lists.

Default types of unorder list is disk.

Attributes Parameters

Types circle &

square &

disk(default)

3. DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or
more Definition Terms (DT elements), followed by one or more Definition Description (DD elements).

<DL>

<DT> HTML </DT>

<DD> Hyper Text Markup Language </DD>


<DT> URL</DT>

<DD> Universal Resource locator</DD>

</DL>

Assignment: 2

Food (put some image)

1.Veg food (put some image)

*idli

*dose

*poori

*chowchow bath

*curd rice

2.Nonveg Food (put some image)

*Biryani

1.chiken biryani

2. mutton biryani

*kabab

*curry

*pepper fry

3. Beverages (put some image)

*coffee

*Tea

i.black tea

ii. Grean tea

*soft drink

o.coke

o.pepsi

o.fanta
o.maaza

o.sprite

* Refers to disk type

O refers to circle type.

* Anchor tag : when we want to link one page to another page we can use anchor tag.

<a href="html/url">data that you want to present</a>

* iframe tag : when we want to insert one web page inside another web page, we use iframe tag.

<iframe src="destination"></iframe>

ex: <iframe src="list.html" height="400px" width="400px"></iframe>

how to insert youtube videos --> open any video

click on share button.

click on embed <> button.

copy iframe content from their.

paste it to your html document.

*Audio tag : to insert a audio file we use a audio Tag

1st method : <audio src="file_name.extension name" controls></audio>

2nd method : <audio controls>

<source src="file_name.extension name">

</audio>

*video tag : to insert a video file we use a video Tag

1st method : <video src="file_name.extension name" controls></video>

2nd method : <video controls height="px" width="px">


<source src="file_name.extension name">

</video>

how to create a table.

table is created using table tag.

Table

§The <TABLE></TABLE> element has four sub-elements:

1.Table Row<TR></TR>.

2.Table Header <TH></TH>.

3.Table Data <TD></TD>.

4.Caption <CAPTION></CAPTION>.

§The table row elements usually contain table header elements or table data elements.

§BG Color: Some browsers support background colors in a table.

§Border: You can choose a numerical value for the border width, which specifies the border in pixels.

§Cellspacing: Cell Spacing represents the space between cells and is specified in pixels.

§Cell Padding: Cell Padding is the space between the cell border and the cell contents and is specified in
pixels.

§Align: tables can have left, right, or center alignment.

§Font color : to change the font color inside the table

§Border Color, Border Color Dark.

§Table caption : A table caption allows you to specify a line of text that will appear centered above or
bellow the table.

§<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

Emoji’s in HTML

Emoji’s look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost all of the characters and symbols in the world.

<p> First letter in alphabets is A <p>


<p> First letter in alphabets is &#65; <p>

Form :

To create a form we are using form tag.

first we will use form tag <form></form>

and inside the form tag we are using several tags to insert the input type by using <input></iput> tag.

<INPUT> Element’s Properties

TYPE= Type of INPUT entry field.

NAME = Variable name passed to CGI application

VALUE= The data associated with the variable

name to be passed to the CGI application

CHECKED= Button/box checked

SIZE= Number of visible characters in text field

MAXLENGHT= Maximum number of characters accepted.

ID = to provide if for one perticular input type.

FOR = we use it inside label tag to specify for which input type we are applying the label.

Client-side Image Maps :

Client-side image maps (USEMAP) use a map file that is part of the HTML document (in an element
called MAP),

and is linked to the image by the Web browser.

Types of Shapes :

Rect used for squares and ordered shapes.

Circle used for circles.

Poly used for unordered shapes.

Number of coordination's for each shape:

Rect 4 numbers for two corners


Circle 3 numbers for the center & R

Poly depends on the number of corners of the shape( 2 numbers for each corner)

EX:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> // usemap is the kind of address to


create map and should e given using #

<map name="workmap"> // value of the name should be same as value given in usemap but without #

<area shape="rect" coords="34,44,270,350" alt="Computer" href=“list.html"> // rectangle shap

<area shape="rect" coords="290,172,333,250" alt="Phone" href=“galeery.htm">

<area shape="circle" coords="337,300,44" alt="Coffee" href=“index.htm"> // circle shape

</map>

Graphics in HTML

using SVG tag we can create graphics inside html document.

svg stands for scalabel vector graphics.

<svg width="500px" height="500px"> <svg> // first we should declare svg tag with height and width
attribute.

inside svg we can draw the patterns.

1) rectangle

<rext x="250" y="250" width="500px" height="500px" fill="red" stroke="green" stroke-width="10px">


</rect>

2) circle

<circle cx="250" cy="250" r="150" fill="red" stroke="green" stroke-width="10px"> </circle>

3)ellipse
<ellipse cx="250px" cy="250px" rx="200px" ry="100px" fill="gold" stroke="green" stroke-
width="7px"></ellipse>

4) polygon

<polygon points="256,100 252,100 253,100 254,100 254,100 251,100 250,100 50,200 80,400 420,400
450,200"

fill="gold" stroke="black" stroke-width="10px"></polygon>

*********END OF HTML*********

You might also like