Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
114 views

U-2 Website Development Using HTML & CSS Class XI 2020-21

The document provides information about using HTML and CSS to develop websites. It discusses various HTML tags such as <html>, <head>, <title>, <body>, <p>, <img>, and <hr> and how they are used to structure an HTML document and add images. It also covers CSS topics like hexadecimal color codes and how they are used to specify colors in HTML. The document aims to teach students the basic building blocks of HTML and CSS for website development.

Uploaded by

MOHD. AHMED NAZEER
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
114 views

U-2 Website Development Using HTML & CSS Class XI 2020-21

The document provides information about using HTML and CSS to develop websites. It discusses various HTML tags such as <html>, <head>, <title>, <body>, <p>, <img>, and <hr> and how they are used to structure an HTML document and add images. It also covers CSS topics like hexadecimal color codes and how they are used to specify colors in HTML. The document aims to teach students the basic building blocks of HTML and CSS for website development.

Uploaded by

MOHD. AHMED NAZEER
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 136

WEBSITE DEVELOPMENT

USING
HTMLUNIT-2
AND CSS
Web Application
Class XI
Learning Objectives
◦What is HTML?
◦Tags and Attributes
◦Container and Empty tags
◦Basic HTML tags
◦Formatting tags
◦Heading tags
◦Font tag
HTML
◦ HTML stands for Hyper Text Markup Language.
◦ An HTML file is a text file containing small markup tags.
◦ The markup tags tell the Web browser how to display the page.
◦ An HTML file must have an .htm or .html as file extension.
◦ Text editor to be used to write html code. Ex: notepad, notepad+
+ etc.…
HTML

Tags

Attributes
HTML Tags

◦ HTML tags are surrounded by the two characters < and > known
as angular brackets.
◦ HTML tags normally come in pairs like <b> (start tag) and </b>
(end tag) known as container tag.
◦ The text between the start and end tags is the content.
◦ HTML tags are not case sensitive, <b> means the same as <B>.
Attributes
◦ Tags can have attributes that define the behavior of the element.
◦ Attributes provide additional information about the HTML elements on your
page.
◦ The <tag> tells the browser to do something, while the attribute tells the
browser how to do it.
◦ Attributes should always be applied with start tag.
◦ The Attribute should always be applied with its name and value pair.
◦ You can add multiple attributes in one HTML element, but need to give
space between two attributes.
Container and Empty tags
◦ The container tag always comes in a set with an opening and a closing.
◦ The forward slash (/) in the closing tag tells the browser that the tag has ended.

◦ The empty tag stands alone and doesn’t has a closing tag.


◦ The tag <br> is one that adds a line break.
Basic HTML Tags
◦ The basic tags include <html>, <title>, <body>.
<html>
◦ This tag is used to indicate that this is a HTML document. Most HTML
documents should start and end with this tag.
<head>
◦ This tag is used to indicate the header section of the HTML document, which
typically includes the <title> tag and is not displayed in the main window of
the browser.
<title>
◦ This indicates the title of this HTML page. The title is what is displayed on the
upper left corner of your browser when you view a web page.
<body>
◦ The <body> tag includes the HTML body of the document.
◦ Everything that is written inside the <body> tag is displayed on the
browser.
◦ The <body> tag may contain several attributes. The most commonly used
ones are listed below:

bgcolor: This is used apply background color in the entire HTML document, and may
be specified either by the color name directly or by the six-digit hex code.

background: This is used to apply background image on the webpage.


text: This is used to apply common color to all the text in the webpage.
Steps to be followed:
1. Text Editor to be used notepad or notepad++ (
https://notepad-plus-plus.org/downloads/v7.0/)
2. Write the code.
3. Give the name to your webpage.
4. Save as .html (ex: web1.html)
5. Double click on the file to open the webpage.
HTML Formatting Tags
• HTML Formatting is a process of formatting text for better look and feel.
• There are many formatting tags in HTML.
• These tags are used to make text bold, italicized, or underlined.
Example:
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
Tag Description
<b> Displays text in a bold style.
<i> Displays text in an italic style.
<mark> Represents text highlighted for reference purposes.

<strong> Indicate strongly emphasized text.

<sub> Defines subscripted text.


<sup> Defines superscripted text.
<tt> Displays text in a teletype style.
<u> Displays text with an underline.
<em> Specifies emphasized text.
<code> Specifies text as computer code.
<mark> Represents text highlighted for reference purposes.
HTML Heading Tags
• A HTML heading tag can be defined as a title or a subtitle which you want to display on the
webpage.
• When you place the text within the heading tags <h1>.........</h1>, it is displayed on the
browser in the bold format and size of the text depends on the number of heading.
• There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).
• h1 is the largest heading tag and h6 is the smallest one. h1 is used for most important heading
and h6 is used for least important.
<font> tag
• Fonts play a very important role in making a website more user friendly and increasing
content readability.
• The font tag is having three attributes called size, color, and face.
• You can change one or all of the font attributes within one <font> tag.
• You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
• You can specify it like <font size = "+n"> or <font size = "−n">
• You can set font face using face attribute.
• You can set any font color you like using color attribute.
• You can specify the color that you want by either the color name or hexadecimal code for
that color.
THANK YOU
WEBSITE DEVELOPMENT
USING
HTML AND CSS
UNIT-2 (CONT.)
Web Application
Class XI
Learning Objectives
◦Using Hexadecimal Colors
◦HR tag
◦Paragraph tag
◦Image tag
◦Marquee tag
Hex Colors
 Colors are very important to give a good look and feel to your website.
 There are following three different methods to set colors in your web page −
 Color names − You can specify color names directly like green, blue or
red.
 Hex codes − A six-digit code representing the amount of red, green, and
blue that makes up the color.
 Color decimal or percentage values − This value is specified using the rgb(
) property.
HTML Colors - Color Names
 You can specify these color name to set text or background color.
HTML Colors - Hex Codes
 A hexadecimal is a 6 digit representation of a color. The first two digitS
represent red value(RR), the next two are green value(GG), and the last are
the blue value(BB).
 Each hexadecimal code will be preceded by a hash sign #.
Number Hexadecimal Number Hexadecimal
 Hexa means 16 i.e. (0-9) & (A-F). Number Number
0 0 8 8
 Color written as #005599 gives 1 1 9 9
2 2 10 A
3 3 11 B
4 4 12 C
5 5 13 D
6 6 14 E
7 7 15 F
Horizontal Rule Tag (<hr> tag)
 The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
 The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.

Attribute Value Description


left
Specifies the alignment of
align center
a <hr> element
right
Specifies the height of a
size pixels
<hr> element
pixels Specifies the width of a
width
% <hr> element
color name
Specifies the color of a
color Hex color
<hr> element
Rgb color
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<HR ALIGN=LEFT COLOR=RED SIZE=3 WIDTH=200>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>
Paragraph Tag (<p> tag)
 The <p> tag in HTML defines a paragraph.
 These have both opening and closing tag i.e. text within <p> and </p> is
treated as a paragraph. <html>
<head>
<title>Paragraph</title>
</head>
<body>
<p>Computer Science</p>
<p>Department</p>
</body>
</html>
Image Tag (<img> tag)
 Images enhance visual appearance of the web pages by making them more
interesting and colorful.
 The <img> tag is used to insert images in the HTML documents.
 The <img> tag has one required attribute i.e. src.
 In HTML the <img> tag has no end tag.
Attributes:
 The src attribute tells the browser where to find the image. Its value is the URL of the
image file.
 The alt attribute provides an alternative text for the image, if it is unavailable or cannot
be displayed for some reason.
 The width and height attributes are used to specify the width and height of an image.
Example
<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Points to remember
• full address of the image should be mentioned along with the extension of
image(.jpg,.jpeg,.png etc).
• It’s a good practice to keep the image in the same folder where your
webpage is saved. (You need not to mention full address.)
• Height and width are mentioned in pixels or % can be used.
Marquee Tag (<marquee> tag)
 An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your
webpage depending on the settings.
 This is created by using HTML <marquees> tag.
Attribute Description
width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
This specifies the direction in which marquee should scroll. This can be a value like up, down,
direction
left or right.
scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and
behavior
alternate.
scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
This specifies how many times to loop. The default value is INFINITE, which means that the
loop
marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
HTML links
 A link or hyperlink allow users to move from one page to another.
 The link starts at the source and points to the destination, which may be any web
resource, for example, an image, an audio or video clip, a PDF file, an HTML document
or an element within the document itself, and so on.
 Links are specified in HTML using the <a> tag.
 Anything (text, image) between the opening <a> tag and the closing </a> tag becomes
the part of the link that the user sees and clicks in a browser.
 <a href="url">Link text</a>
 The href attribute specifies the target of the link.
Link through Text
<a href="https://www.google.com/">Google Search</a>
<a href=contact.html>Tutorial Republic</a>

Link through Image


<a href=home.html><img src="kites-thumb.jpg" alt="kites"></a>

Link to file
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

link to mail
<a href = "mailto:abc@example.com”>Send Feedback </a>
THANK YOU
WEBSITE DEVELOPMENT
USING
HTML AND CSS
UNIT-2 (CONT.)
Web Application
Class XI
Learning Objectives
◦Ordered List
◦Unordered List
◦Nested List
◦Table
HTML lists
 HTML lists are used to present list of information in well formed and semantic
way. There are different types of list in HTML and each one has a specific
purpose and meaning.
 Unordered list
 Used to create a list of related items, in no particular order.
 Ordered list
 Used to create a list of related items, in a specific order.
Note: Inside a list item you can put text, images, links, line breaks, etc. You
can also place an entire list inside a list item to create the nested list.
HTML Unordered Lists
 An unordered list created using the <ul> element, and each list item starts with
the <li> element.
 You can use type attribute for <ul> tag to specify the type of bullet you like.
 By default, it is a disc.
 <ul type = "square">
 <ul type = "disc">
 <ul type = "circle">
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists
 An unordered list created using the <ol> element, and each list item starts with the <li>
element.
 You can use type attribute for <ol> tag to specify the type of numbering you like.
 By default, it is a number.
 <ol type = "1"> - Default Numerals.
 <ol type = "I"> - Upper-Case Numerals.
 <ol type = "i"> - Lower-Case Numerals.
 <ol type = "A"> - Upper-Case Letters.
 <ol type = "a"> - Lower-Case Letters.
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
HTML Ordered Lists
 You can use start attribute for <ol> tag to specify the starting point of
numbering you need.
 <ol type = "1" start = "4"> - Numerals starts with 4.
 <ol type = "I" start = "4"> - Numerals starts with IV.
 <ol type = "i" start = "4"> - Numerals starts with iv.
 <ol type = "a" start = "4"> - Letters starts with d.
 <ol type = "A" start = "4"> - Letters starts with D.
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
Nested List
HTML Tables
 HTML table allows you to arrange data into rows and columns.
 They are commonly used to display tabular data like product listings,
customer's details, financial reports, and so on.
 You can create a table using the <table> element and it may consist one or
more <tr>, <th>, and <td> elements.
 The <tr> element defines a table row.
 The <th> element defines a table header.
 The <td> element defines a table cell.
<head> <tr>
<title>Creating Tables in HTML</title> <td>2</td>
</head> <td>Clark Kent</td>
<body> <td>34</td>
<h2>HTML Table (Default Style)</h2> </tr>
<table border=1> <tr>
<tr> <td>3</td>
<th>No.</th> <td>Harry Potter</td>
<th>Name</th> <td>11</td>
<th>Age</th> </tr>
</tr> </table>
<tr> </body>
<td>1</td> </html
<td>Peter Parker</td>
<td>16</td>
</tr>

Tables do not have any borders by default. 


HTML Tables Attributes
Attribute Description
Specifies whether or not the table is being used for layout
border
purposes.
bgcolor Specifies the background color for a table.
align Specifies the alignment of a table according to surrounding text.
width Specifies the width of a table.
height Specifies the height of a table.
colspan specifies the number of columns a cell should span.
rowspan specifies the number of rows a cell should span.
bordercolor Specifies the border color for a table.
background sets background image for whole table or just for one cell.
Colspan and Rowspan
 The rowspan and colspan are <td> tag attributes.
 These are used to specify the number of rows or columns a cell should span.
 The rowspan attribute is for rows and the colspan attribute is for columns.
 It allows the single table cell to span the width of more than one cell or column.
 These attributes have numeric values, for example, colspan=3 will span three columns.
 It provides the same functionality as “merge cell” in the spreadsheet program like
Excel/Word.
<body> <body>
<h2>Spanning Columns</h2> <h2>Spanning Rows</h2>
<table> <table>
<tr> <tr>
<th>Name</th> <th>Name:</th>
<th colspan="2">Phone</th> <td>John Carter</td>
</tr> </tr>
<tr> <tr>
<td>John Carter</td> <th rowspan="2">Phone:</th>
<td>5550192</td> <td>55577854</td>
<td>5550152</td> </tr>
</tr> <tr>
</table> <td>55577855</td>
</body> </tr>
</table>
</body>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
THANK YOU
WEBSITE DEVELOPMENT
USING
HTML AND CSS
UNIT-2 (CONT.)
Web Application
Class XI
Learning Objectives
◦Form tag and its element
HTML Form Elements
• An HTML form contains form elements and is used to collect user inputs.
• Form elements are different types of input elements, like: text fields, checkboxes, radio
buttons, submit button etc.
• The <input> element is displayed in several ways, depending on the type attribute.

• <input type="text"> defines a single-line input field for text input.


• <input type="radio"> defines a radio button.
• <input type="submit"> defines a button for submitting the form data to a form-handler.
• <input type="button"> defines a button.
• <input type="checkbox"> defines a checkbox.
• <input type="color"> is used for input fields that should contain a color.
• <input type="date"> is used for input fields that should contain a date.
• <input type="datetime-local"> specifies a date and time input field, with no time zone.
◦ <input type="email"> is used for input fields that should contain an e-mail address.

◦ <input type="month"> allows the user to select a month and year.

◦ <input type="number"> defines a numeric input field.

◦ <input type="password"> defines a password field.

◦ <input type="reset"> defines a reset button that will reset all form values to their
default values.

◦ <input type="image"> defines an image as the submit button.


The <select> Element

• The <select> element defines a drop-down list.


• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option.
• Use the size attribute to specify the number of visible values.
• Use the multiple attribute to allow the user to select more than one value.

Ex:
<select id="cars" name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
• The <textarea> element defines a multi-line input field (a text area).
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
Ex:
<textarea>
The cat was playing in the garden.
</textarea>
The <fieldset> and <legend> Elements

• The <fieldset> element is used to group related data in a form.


• The <legend> element defines a caption for the <fieldset> element.
Ex:
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
THANK YOU
WEBSITE DEVELOPMENT
USING
HTML AND CSS
UNIT-2 (CONT.)
Web Application
Class XI
Learning Objectives
◦What is CSS?
◦CSS Syntax
◦Types of Stylesheet
◦CSS Selector
Cascading Style Sheet(css)
What is CSS?
CSS stands for Cascading Style Sheet
• Styles define how documents are presented on screens
• provide easy and effective alternatives to specify various attributes for the
HTML tags
• can specify a number of style properties for a given HTML element
• Each property has a name and a value, separated by a colon (:).
• Each property declaration is separated by a semi-colon (;).
CSS Syntax
 A CSS rule has two main parts: a selector, and one or more declarations.
 The selector is normally the HTML element you want to style.
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change.
 Each property has a value.
 A CSS declaration always ends with a semicolon, and declaration groups are enclosed in
curly brackets.
Applying CSS
There are 3 ways of applying CSS into HTML webpage:
External
Style sheet

Internal
Style sheet

Inline Style
sheet
CSS HTML
INLINE STYLESHEET

• You can apply style sheet rules directly to any HTML element using style
attribute of the relevant tag.

• It is done only when you are interested to make a particular change in any
HTML element only.
INTERNAL STYLESHEET

• When you want to apply Style Sheet rules to a single document only then you
can include those rules in header section of the HTML document using
<style> tag.

• Rules defined in internal style sheet override the rules defined in an external
CSS file.
EXTERNAL STYLESHEET

• When you need to use your style sheet to various pages, then it’s always
recommended to define a common style sheet in a separate file.
• A cascading style sheet file has extension as .css
• It will be included in HTML files using <link> tag.
External Style sheet
named as style.css
CSS Selector
CSS Selector: Element Example
h1
{
color : #36CFFF;
font-family : arial;
}

p
{
color : red;
text-align : center;
}
CSS Selector: ID Example
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
• All the elements having that id will be formatted according to the defined rule.

For Example:
<p id=“welcome”>Welcome to the wonderful world of HTML.</p>

#welcome
{
text-align : center;
color : red;
}
CSS Selector: Class Example
• The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a "."

For Example:
<h2 class=“center”>Summary</h2>
<p class=“center”>Paragraph</p>

.center
{
text-align : center;
color : red;
}
CSS Selector: Universal & Grouping Example
video
CSS PROPERTIES
Some of the common properties used in CSS:

• Background Properties
• Border Properties
• Height and Width Properties
• Text Properties
• Font Properties
• List Properties
• Table Properties
Background Properties
CSS background properties are used to define the background effects of an
element.

CSS properties used for background effects:

• background-color: specifies the background color of an element.


• background-image: specifies an image to use as the background of
an element. By default, the image is repeated so it covers the
entire element.
• background-repeat: repeats an image both horizontally and
vertically.
• background-attachment: specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page)
Background Properties
Property Name Syntax Values

background-color:#224576;
background-color color name|hex color|rgb color
Background-color:rgb(23,45,89);
image name along with
background-image background-image: url("paper.gif"); extension
repeat-x (horizontally)|
background-repeat background-repeat: repeat-x; repeat-y (vertically)|
no-repeat

background-attachment background-attachment: fixed; fixed|scroll


Border Properties
The CSS border properties allow you to specify the style, width, and color of
an element's border.

CSS properties used for border:

• border-style: specifies what kind of border to display.


• border-width: used to set the width of the border.
• border-color: set the color of the four borders.
• border-radius: defines the radius of the element's corners.
Border Properties

Property Name Syntax Values


none|hidden|dotted|
border-style border-style: ridge; dashed|solid|double|
groove|ridge|inset|outset

border-width: 5px;
border-width or value in px|thin|mediumthick
border-width: medium;

border-color border-color: red; color name|hex color|rgb color

border-radius border-radius: 25px; value in px


Height & Width Properties
The height and width properties are used to set the height and width of an
element.

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block

Property Name Syntax Values


• value in px
height height: 250px; • %
• value in px
width width: 25px; • %
Text Properties
The CSS text properties allow you to specify the text-align, text-transform,
and color of the text.

CSS properties used for text:

• text-align: used to set the horizontal alignment of a text.


• color: used to set the color of the text.
• text-transform: used to specify uppercase and lowercase letters in a
text.
• text-decoration-line: Sets the kind of text decoration to use
• text-decoration-style: Sets the style of the text decoration
• text-decoration-color: Sets the color of the text decoration
Text Properties
Property Name Syntax Values

color color: orange; color name|hex color

text-align text-align: justify; left|right|center|justify

text-decoration-line text-decoration-line: overline; underline|overline|line-through

text-decoration-style text-decoration-style: wavy; dotted|dashed|solid|double|wavy

text-decoration-color text-decoration-color: #237815; color name|hex color

text-transform text-transform: capitalize; uppercase|lowercase|capitalize


Font Properties
The CSS font properties define the font family, boldness, size, and
the style of a text.

CSS properties used for font:

• font-size: Specifies the font size of text


• font-style: Specifies the font style for text
• font-weight: Specifies the weight of a font
• font-family: Specifies the font family for text
Font Properties
Property Name Syntax Values

font-size font-size: 12px; Value in px

font-style font-style: italic; normal|italic|oblique

normal|bold|bolder|lighter|
font-weight font-weight: bold; number from 100-900

font-family font-family: arial; name of the font


List Properties
The CSS list properties allow you to:
•Set different list item markers for ordered lists and unordered lists
•Set an image as the list item marker
•Add background colors to lists and list items

CSS properties used for list:

• list-style-type: specifies the type of list item marker


• list-style-image: specifies an image as the list item marker
• background: style lists with colors, to make them look a little more
interesting
List Properties
Property Name Syntax Values

disc|circle|decimal|square|
list-style-type list-style-type: lower-alpha; lower-roman|upper-roman|
lower-alpha|upper-alpha

list-style-image list-style-image: url('sqpurple.gif'); Name of the image with extension

background background: cyan; value in px|Hex color


Table Properties
HTML table can be greatly improved with CSS.

CSS properties used for table:

• border-width: Specifies the width of the border.


• border-style: Specifies the style of the border. 
• border-color: Specifies the color of the border. 
• border-collapse: sets whether the table borders should be collapsed
into a single border
• text-align: sets the horizontal alignment
• vertical-align: sets the vertical alignment
Table Properties
Property Name Syntax Values
medium|thin|thick|
border-width border-width: medium; length value in px
none|hidden|dotted|dashed|
border-style border-style: dashed; solid|double|groove|ridge|
inset|outset

border-color border-color: white; color name|hex color

border-collapse border-collapse: collapse; separate|collapse

text-align text-align: center; left|right|center

vertical-align vertical-align: middle; top|bottom|middle

height
width
as discussed earlier as discussed earlier
background-color
color
THANK YOU
WEBSITE DEVELOPMENT
USING
HTML AND CSS
UNIT-2 (CONT.)
Web Application
Class XI
Learning Objectives
◦Domain Name System
◦Domain Registration Process
◦PUBLISHING THE WEBSITES
Domain Name System
◦ The domain name system (DNS) is a naming database in which internet domain names are
located and translated into internet protocol (IP) addresses. The domain name system maps
the name people use to locate a website to the IP address that a computer uses to locate a
website.

◦ The Domain Name System (DNS) is a central part of the internet, providing a way to match
names (a website you are looking for) to numbers (the address for the website). Anything
connected to the internet - laptops, tablets, mobile phones, websites - has an Internet Protocol
(IP) address made up of numbers.
Types of Name Servers
◦ Name spaces are of two types: Flat name spaces and Hierarchical Names.
◦ The name assigned to machines must be carefully selected from a namespace with complete
control over the binding between the names and IP addresses.

Flat name space: The original set of machines on the Internet used flat namespaces, These
namespaces consisted of sequence of characters with no further structure. A name is assigned to
an address.
Hierarchical names: Hierarchical namespaces provides a simple yet flexible naming
structure. The namespace is partitioned at the top level.
Hierarchy of Name Servers
◦ Computers called name servers are responsible for keeping track of any changes and translating them
between IP address and domain addresses. They make sure that when you type in a Web URL you are
sent to the proper location and to the right person. They are responsible for properly routing all
messages and traffic on the Internet.
THANK YOU

You might also like