Scribd
Upload
2 views

Unit 1 - HTML-st

The document serves as a syllabus for an introductory course on web technologies, covering HTML elements, CSS3 properties, and web design principles. It includes practical case studies, the structure of HTML documents, and the use of various HTML tags for creating web pages. Additionally, it discusses the differences between HTML and HTML5, as well as the role of CSS in styling web content.

Uploaded by

Nitin Panzade
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
2 views

Unit 1 - HTML-st

The document serves as a syllabus for an introductory course on web technologies, covering HTML elements, CSS3 properties, and web design principles. It includes practical case studies, the structure of HTML documents, and the use of various HTML tags for creating web pages. Additionally, it discusses the differences between HTML and HTML5, as well as the role of CSS in styling web content.

Uploaded by

Nitin Panzade
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/ 105

Syllab

us
INTRODUCTION TO WEB TECHNOLOGIES
• HTML elements: Headings, paragraphs, colors and fonts, links, frames, lists, tables, images and
forms, block and inline elements, HTML Semantic elements, Difference between HTML and
HTML5. Understanding HTML5 Media.

• Introduction to CSS3 box model, selectors, Positioning, Pseudo-class, Pseudo-element, Building


Responsive Websites with HTML5 and CSS3, HTML5 and CSS3 Site Design using Flexbox,
Types of CSS, How to use CSS, Properties, Classes, Child-Class (Nested CSS), Colors, Text,
Background, Border, Margin, Padding, Positioning (flex, grid, inline, block), Animation,
Transition.

• Case Study: Create a Webpage and Survey form using suitable HTML Tags and style-sheet.
Introduction to Web Technology
•Web
• The web is collection of documents that are
interconnected by hyper links.
• These documents are accessed by web browsers
and provided by web servers.
• WWW (World Wide Web)
•The WWW sometimes only pronounced simply as
Web, is a way of retrieving information over the
internet.
•HTTP protocol is used by the web to
transmit data over the internet.
•Website
Cont
.. as web
•A website is made up of web pages. These web pages also known
documents are interconnected with each other with the help of hyperlinks.
•Such webpages can be accessed by using various web browsers like IE,
Chrome, Firefox etc.. The web document can contain tables, simple
text, graphics etc..
•Web sites are usually created for commercial purpose. There are various
extensions of web sites depending upon their prime purpose.
• .com – Commercial
• .org – Organization
• .net – Network
• .biz – Business
• .edu – Education
Cont..
•Website :
• Also there are some extensions depending upon the countries
• .in - India
• .uk – United Kingdom
• .us – America
• .nz – New Zealand
Cont..
•For any Website there are basically 2 important aspect
•Web Designing
•Web Development (Scripting)
• Web Designing
•As the basic intention of web site is always commercial, it s necessary
that the website should be user friendly and attractive.
•For designing purpose various scripting languages like HTML, CSS and
software tools like Photoshop, CorelDraw, flash are used.
HTM
L
HTML
•Getting started with HTML

•Why HTML

•Tags and Elements

•Attributes, Properties, Headings list, Links, Tables, Images

•HTML Form
•Media (Audio, Video)

•Semantic HTML5 Elements.


Web pages also known as web documents are interconnected
with each other with the help of hyperlinks.
• HTML (Hyper Text Markup Language)
• Structure of HTML document.
• HTML document contain two main parts
• Head :
• The element contains title and matadata of a web document.
• Used to declare variables and functions in scripting languages. These variables and
functions are then accessible throughout the page.
• Body
• Element contain the information which we like to display on a web page. All text to be displayed
and control creation is done in this section.
HTML
Tags
• HTML is a markup language and makes use of various tags
to format the content.
• Thesetags are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their
corresponding closing tags.
• Forexample, <html> has its closing tag </html> and <body>
tag has its closing tag </body> tag etc.
Live Demo
DEMO
HTML Document Structure
HTML <!DOCTYPE>
Declaration
<!DOCTYPE html> 1 to
<html> 7
<head>
<title>Title of the
document</title>
</head>
<body>
The content of the document......
</body>

</html>

• All HTML documents must start with a <!DOCTYPE>


declaration.

• In HTML 5, the declaration is simple:


<!DOCTYPE html>
• The <!DOCTYPE> Declaration
• The declaration is not an HTML tag.
• The<!DOCTYPE> declaration tag is used by the web
browser to understand the version of the HTML used in
the document.
• Currentversion of HTML is 5 and it makes use of the
following declaration −

<!DOCTYPE html>
Browser
Support

• Older HTML Documents


• In
older documents (HTML 4 or XHTML), the declaration is more
complicated because the declaration must refer to a DTD
(Document Type Definition).

• HTML 4.01:
• <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE> declaration is NOT case
sensitive.
Examples
<!DOCTYPE 8
html>
<!DocType
html>
<!Doctype
html>
<!doctype
HTML <a> Tag
html>
• Example

• Create a link to W3Schools.com:


• <ahref="https://www.w3schools.com">Visit
W3Schools.com!</a>
Basic HTML Live
Document Demo
HTML - Heading
Tags
• Any document starts with a heading. You can use different
sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that
heading.

• Live Demo
HTML Heading-Paragraph-Line Breaks
• HTML tags are standard keywords in the web page which define how the web
browser should format and display the content.
• Headings
• <h1> </h1>
• <h2> </h2>
• Upto <h6>

• Paragraph <p> </p>


• LineBreaks <br> it works like /n in C
programming.
HTML Color and Font
Tags
• Colors and Fonts -
• Colors
• Attributes of <body> tag
• bgcolor
• Used to set background color of the page
• text
• Used to set color to the body text.
• alink
• Used to set color to the active links or selected links
• link
• Used to set color to the linked text
• vlink
• Used to set the color to the visited links i.e for linked text that you have already clicked on
HTML Frames
• Frames :
• Usually we can display only one web page at a time in the browser window.
• if we wish to display multiple pages at a the same time on the browser window, then we
can use the frames to divide the window in the different sections and in each section we can
display a separate webpage.
• a group of frames in the window is called frameset.
• In the frameset application the basic tag of html like <body> is not used.
• <frameset> tag is used.
• 2 main attributes of <frameset>tag are:
• Rows : Define the horizontal frames.
• Cols : Define the vertical frames.
HTML Frames
• <frameset> tag :
• <frame> is the sub-tag of frameset. The <frame> tag has attribute “src” which we have to
specify the URL of the web page which we want to display in particular frame.
• Attributes of <frameset>
• Cols : Specifies the number of columns contained in the frameset and also size of
all the columns. We can set cols = “200, 400, 100” or cols = “20%, 70%, 10%” or cols = “20%,
*, 20%.
• Rows : horizontal frames.
• Rows = “20%, 80%” : It will generate two horizontal frames

• Attributes of <frameset>
• border : width of the border. For eg : border=“3”.
• Frameborder : this attributes mentions whether to display a three dimensional border
between frames or not. It takes value 1 (true) or 0 (false). For eg: frameborder = “1” specifies
frame with three dimensional border.
HTML Lists
• Lists:
• Type of HTML list
• Ordered
• Type : 1. Number I: Upper roman i: Lower roman A: upper Alpha a: lower alpha

• Unordered
• Attribute : type : circle, square, disc
• Definition
• <dl> : Defining beginning of list
• <dt> : Specify the term
• <dd> : Specify term definition
• </dl> : End of list
HTML
T ables
• HTML tables allow web developers to arrange data into rows and
columns.
Each table cell is defined by a <td> and a </td> tag.

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.
Table
Rows
Each table row starts with a <tr> and end with a </tr>
tag.

tr stands for table row.

Table Headers
use the <th> tag instead of the <td> tag
TAG Description

<table> It defines table

<tr> Table row It defines a row in table

<th> Table heading It define column headings

<td> Table data It defines cell in table

<caption> It defines caption of table


TAG Value Description

Attribute of align Left , center , right Specifies the alignment of a


table.
Table tag bgcolor rgb(x,x,x) , #xxxxxx, Specifies the color for
colopname background
border Any number Specifies the size of border

cellpadding Pixels Specifies the space between


cell wall and the cell
content
Cellspacing Pixels Specifies the space between
cells
Width Pixels % Specifies the width of table

Height Pixels % Specifies the height of table

Bordercolor rgb(x,x,x) , #xxxxxx, Color of table border


colopname
Attribute of Table tag
• Colspan and Rowspan Attribute:
• Colspan :
• Used to define the number of columns a cell should span (or merge) horizontally. Colspan
merge the cells horizontally, default value for colspan is 1.
• <td colspan= 2> merged </td>

• Rowspan:
• Used to define the number of rows a cell should span (or merge) vertically. rowspan
merge the cells vwrtically, default value for rowspan is 1.
• <td rowspan= 2> merged </td>
HTML Image
• Images :
• 2 option to insert image in webpage
• Using <body> tag : body tag has a background attribute to set image as a
background of the page.
<body background = “Desert.jpg”>

• Using <img> tag


• The background image occupies the entire background of webpage. We cannot set
size or location for it. <img> tag is used to insert images at desired location with desired size.
• No need of closing tag

Live Demo
Attribute Value Description
Attributes of
align Top bottom left Specifies the
Image Tag middle right alignment of an
image
alt Text Defines an alternate
text for the image
border Pixels Defines the width
of the border
around an image
height Pixels Defines the height
of the image
hspac Pixels Defines the
e whitesapce on both
of the left and right
side of an image
vspac Pixels Defines the
e whitesapce on top and
bottom of an image
src URL Defines the URL
of an image
HTML form
• The HTML form is a part of a document which may have general content,
special elements known as controls like textfields, checkboxex , submit
button, radio buttons etc. users usually complete the form by modifying it’s
elements.
• HTML forms are generally necessary when we want to accept some data from
the website visitors. For example email account form, credit card form where we
may like to accept information like name, email address, phone number, gender etc.
HTML HTML5
<audio> and <video> <audio> and <video>
tags are not supported tags are supported

Finding out The HTML5 supports the


geographical location API for identifying the
is impossible using geographic location
HTML HTML
Supports tags such as <applet>, <center>,
vs <applet>,
<center>, <font>,
<font>,
<frame>, <strike>
HTML5 <frame>,
<strike>
tags are removed
from HTML5
Dose not allow Java script It allows JavaScript to
to run in browser. run in background.

There is no support for The <canvas> tag is


<canvas> for 2D drawing

It needs external plugins The need for external


such as flash plugin is reduced
Use CSS to style links
With CS..S, links can be styled in many different ways.
9&
Links can be styled with any CSS property 10
e.g. color, font-family, background, etc.
Example
a {
color: hotpink;
}

four links states are:


• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over
it
• a:active - a link the moment it is clicked
HTML
Attributes
HTML
Tags
HTML
Media
Common Audio
Formats
HTML
Video
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>
Referen
ce
• https://www.w3schools.com/html/def
ault.asp
CS
S
CSS
•Why CSS

•Types of CSS

•How to use CSS

•Properties

•Classes, Child-Class (Nested CSS)


•Colors, Text, Background, Border, Margin, Padding

•Positioning (flex, grid, inline, block), Animation, Transition


The good, the bad and
<p>
the…
<fontugly!
face="Arial">Shashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be
<font size="+4" color="red">BORED</font> here!
</p> HTML

Slashdot. News for nerds!! You will never, EVER be BORED


here!
output

• Tags such as b, i, u, and font are discouraged in


strict XHTML
• Why is this bad?

CS38 5
0 7
Basic CSS rule syntax
selector
{ property:
value; property:
value;
...
property: value; CS
} S
p {
font-family: sans-serif;
color: red;
} CS
• S
A CSS file consists of one or more rules
• Each rule starts with a selector
• A selector specifies an HTML element(s) and then
applies style
properties to them
• a selector of * selects all elements 7
2
Attaching a CSS file <link>
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />


<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
• A page can link to multiple style sheet files
• In case of a conflict (two sheets define a style for
the same HTML element), the latter sheet's
properties will be used
CS38 72
0
Embedding style sheets: <style>
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML

• CSS code can be embedded within the head of an


HTML page
• Bad style and should be avoided when possible
(why?)
CS38 73
0
Inline styles: the style attribute
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML

This is a paragraph
output

• Higher precedence than embedded or linked


styles
• Used for one-time overrides and styling a
particular element
CS38 74
• Bad style and should be0 avoided when possible
CSS properties for colors
p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above


output

propert description
y color color of the element's text
color that will appear
background-
behind the element
color

CS38 75
0
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
• color names: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white (white),
yellow
• RGB codes: red, green, and blue values from 0 (none) to 7
255 (full) 7
Grouping styles
p, h1, h2
{ color:
green;
}
h2 {
background- CS
color: S
This paragraph uses the above style.
yellow;
}
This h2 uses the above styles.
output

• A style can select multiple elements separated


by commas
• The individual elements can also have their
own styles CS38
0
77
CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

• CSS (like HTML) is usually not commented as


rigorously as programming languages such as
Java
• The // single-line comment style is NOT
supported in CSS
• The <!-- ... --> HTML comment style is also NOT
supported in CSS

CS38 78
0
CSS properties for fonts
property description
font- which font will be used
family how large the letters will be
font-size drawn used to enable/disable
font-style italic style used to
font- enable/disable bold style
weight
Complete list of font properties
(http://www.w3schools.com/css/css_reference.asp#font)

CS38 79
0
font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CS
S
This paragraph uses the first style above.

This h2 uses the second style above.


output

• Enclose multi-word font names in


quotes

CS38 80
0
More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.


output
• We can specify multiple fonts from highest to
lowest priority
• • serif, sans-serif,
Generic font names:cursive, fantasy, monospace

• If the first font is not found on the user's computer, the next is tried
• Placing a generic font name at the end of your font-family value, ensures that every
computer will use a valid font

CS38 81
0
font-size
p {
font-size: 24pt;
}

ThisCSS
paragraph uses the style above.
output
• units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em

• vague font sizes: xx-small , x-small , small , medium, large, x-large, xx-large, smaller,
larger
• percentage font sizes, e.g.: 90%, 120%

CS38 82
0
font-size
p {
font-size: 24pt;
}

ThisCSS
paragraph uses the style above.
output
• pt specifies number of point, where a point is 1/72 of an inch onscreen
• px specifies a number of pixels on the screen
• em specifies number of m-widths, where 1 em is equal to the font's
current size

CS38 83
0
font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CS
S
This paragraph uses the style above.
output

• Either of the above can be set to normal to turn


them off (e.g. headings)

CS38 84
0
CSS properties for text
property description
text-align alignment of text within its
text- element decorations such as
decoration underlining
gaps between the various
line-height,
portions of the text
word-
spacing, indents the first letter of
text-
letter- each paragraph
indent
spacing
Complete list of text properties
(http://www.w3schools.com/css/css_reference.asp#text)

CS38 85
0
text-align
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
• text-align can be left, right, center,
or justify

CS38 86
0
text-decoration
p {
text-decoration: underline;
} CS
S
This paragraph uses the style above.
output

• can also be overline, line-through, blink,


or none
• effects can be combined:
text-decoration: overline underline;

CS38 87
0
The list-style-type property
ol { list-style-type: lower-roman; }
CSS
• Possible values:

i.none : No marker

ii.disc (default), circle, square

iii.Decimal: 1, 2, 3, etc.

iv.decimal-leading-zero: 01, 02, 03, etc.

v.lower-roman: i, ii, iii, iv, v, etc.

vi.upper-roman: I, II, III, IV, V, etc.

vii.lower-alpha: a, b, c, d, e, etc.

viii.upper-alpha: A, B, C, D, E, etc.

x. lower-greek: alpha, beta, gamma, etc.

others: hebrew, armenian, georgian, cjk-ideographic,


hiragana…

CS38 88
0
Body styles
body {
font-size: 16px;
}
CSS

• Applies a style to the entire body of your page


• Saves you from manually applying a style to
each element

CS38 89
0
Cascading Style Sheets
• Properties of an element cascade together in
this order:
• browser's default styles
• external style sheet files (in a <link> tag)
• internal style sheets (inside a <style> tag in the
page's header)
• inline style (the style attribute of the HTML
element)

CS38 90
0
Inheriting styles
body { font-family: sans-serif; background-color: yellow;
}
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align:
center; }
CSS
This is a heading
A styled paragraph. Previous slides are available on the website.

• A bulleted list output

• when multiple styles apply to an element, they


are inherited
• a more tightly matching rule can override a
CS38 91
more general inherited
0 rule
Styles that conflict
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS

This paragraph uses the first style above.


This heading uses both styles above.
output

• when two styles set conflicting values for the


same property, the latter style takes
precedence

CS38 92
0
W3C CSS Validator
<p>
<a
href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p>
CSS

output

• jigsaw.w3.org/css-validator/
• checks your CSS to make sure it meets the
official CSS specifications
CS38 93
0
CSS properties for backgrounds
property description
background- color to fill background
color image to place in
background- background
image placement of bg image
within element
background- whether/how bg image
position should be repeated
whether bg image scrolls
background-repeat with page
shorthand to set all
background- background properties

attachment CS38
0
94
background-image
body {
background-image: url("images/draft.jpg");
}
CSS

• background image/color fills the element's


content area

CS38 95
0
background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

• can be repeat (default), repeat-x, repeat-y, or


no-repeat

CS38 96
0
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CS
S

• value consists of two tokens, each of which can


be top, left, right, bottom, center, a
percentage, or a length value in px, pt,
etc.
• value can be negative to shift left/up by a given
CS38 97
amount 0
Aside: Favorites icon ("favicon")
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML

<link href="yahoo.gif" type="image/gif" rel="shortcut


icon" />
HTML

• The link tag, placed in the HTML page's head


section, can specify an icon
• this icon will be placed in the browser title bar and
bookmark/favorite
CS38 98
0
• Cascading Style Sheet.
• It is a markup language used in the web document for presentation purpose.
• Primary intension of CSS was to separate out the web content from the
web presentation.
• Advantages:
• By combining CSS with the HTML document, flexibility can be achieved.
• Help in managing large scale complex sites.
• If CSS is used effectively then global style sheet can be applied to a web document. This
maintains the consistency.
• If small changes need to be done in style of web content, then use of CSS is more
convenient.
• There are three level of Cascading Style Sheet.
• Inline Style sheet
• Document level style sheet / Internal Style sheet
• external level Style sheet
• CSS selectors used to select the specific content which we want to style.
Selectors are the internal part of CSS rule set.
• CSS selectors chose the different HTML element as per Id, Class, type, attribute.
• Type of Selectors:
• CSS element selector
• CSS Id selector
• CSS class selector
• CSS Group selector
• CSS universal selector : will be apply to all elements
•CSS Element Selector
• Simple selector form is a single element to which the property and value is applied.

•CSS Class Selector


• Using class selector we can apply different styles to the same element

•CSS Id Selector
• The Id selector is similar to the class selector.

•CSS Generic Selector


• We define the class in generalized form.
• Particular class can be apply to any tag.

•CSS Universal Selector


• This selector can be applied to all the elements in the document
BOOTSTR
AP
• Why Bootstrap

• CSS over Bootstrap

• How to Use Bootstrap

• Bootstrap Grid System

• Bootstrap Responsive

• Bootstrap Classes

• Bootstrap Components (i.e., Button, Table, List, etc.)

• Bootstrap as a Cross Platform.


W3C
• What is W3C

• How W3C handles/Supports Web Technologies


Thank
You!!

You might also like