HTML Css Note

Web Development Technology (HTML+CSS)
HTML&CSS
HyperText Markup Language (HTML) and Cascading Style

Sheets (CSS) are the two primary programming languages
upon which all modern web infrastructures are built.
These two programming languages tell your computer
how to display a web page and distinguish one web
element from another. Using HTML & CSS, you can design
rudimentary web pages and begin the process of learning
how to create dynamic and evocative web pages.
Department of Information Technology Supporting and Maintenance

Introduction of the Internet and World Wide Web Network
The Internet
The Internet, the interconnected network of computer networks that spans the globe,
seems to be everywhere today.
 Birth of the Internet- the Internet began as a network to connect computers at research
facilities and universities.
 Birth of the Web- Development of the World Wide Web by Tim Berners-Lee at
CERN
 Development of Mosaic, the first graphics-based web browsers at NCSA.
Intranet
A private network contained within an organization or business used to share information
and resources among coworkers.
Extranet
A private network that securely shares part of an organization’s information or operations
with external partners.
Network
Consists of two or more computers connected for the purpose of communicating and
sharing resources.
Types of Network
 Local Area Network (LAN)
It is usually confined to a single building or group of connected buildings
 Wide Area Network(WAN)

It is geographically dispersed and usually uses some form of public or commercial
communications network
Client/Server Model
Client (Web Browser)
 requests some type of service (such as a file or database access) from the server
Department of Information Technology Supporting and Maintenance Page 1

Server (Web Server)

 fulfills the request and transmits the results to the client over a network
Figure 1: Web client and Web server

Protocols
 rules describe the methods for clients and servers to communicate each other
 no single protocol that makes the Internet and Web work
 a number of protocols with specific functions are needed
File Transfer Protocol (FTP)

 allow files to be exchanged between computers on the Internet
 use FTP to transfer web page files from their computers to web servers
 used to download programs and files from other servers
Email Protocols
 Sending E-mail
 SMTP Simple Mail Transfer Protocol
 Receiving E-mail
 POP (POP3) Post Office Protocol
 IMAP Internet Mail Access Protocol
Hypertext Transfer Protocol (HTTP)

 is a set of rules for exchanging files
 web browsers send HTTP requests for web pages
 web servers send HTTP responses back to the web browsers

Uniform Resource Locator (URL)

 represents the network location of a resource
Figure 2: URL describing a file within a folder
Web Development Technology

Hypertext Markup Language (HTML) and Cascading Style Sheet (CSS)
 HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the two
primary programming languages upon which all modern web infrastructures are built.
 HTML uses a system of tags and breaks to communicate to web browsers how a
given web page should be displayed for users.
 CSS informs the web browser how it should display some aspects of content,
assigning fonts, sizes, colors, and other visual data to web page elements.
 Using HTML & CSS, you can design web pages and begin the process of learning
how to create dynamic and static web pages.
IDE
 Notepad
 Visual Studio Code
 Notepad++
 Dream Weaver etc…
HTML5 Web Page

<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Page Title Goes Here </title>
<meta charset=“utf-8”>
</head>

<body>
…..body text and more HTML5 tags go here…
</body>
</html>
meta charset=”utf-8”
 The meta element descripts a character of a web page
 Character encoding is the internal representation of letter, numbers, and symbols in a
file
 HTML5 meta Tag
Example of Web Page

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
Figure 3: Hello World web page
HTML Tags
Heading Tag
 Organize into six levels: h1 through h6
 h1 is the largest size of text
 The smallest for h6
 Display with bold font weight
 Change the location use align attribute with values (left/center/right/justify)
Example

<h1>Heading level 1</h1>

<h1 align=”center”>
Heading</h1>
Figure 4: Web Page document with six levels headings
Paragraph Tag
 Display paragraph using <p> tag
 Display left side each paragraph
 Change the paragraph position uses align attribute with values (left/ right/ center /
justify)
Example
<p>This is a sample paragraph. Heading tags can help to make your pages more
accessible and usable. It is good coding practice to use heading tags to outline the
structure of your web page content.</p>
(or)
<p align=”center”>This is a sample paragraph. </p>
Figure 5: Web Page document with a paragraph
Bold Tag or Strong Tag

 Change the bold font use <b> tag or <strong> tag

Example
<b>Bold Element </b>  Bold Element
Italic Tag or Emphasis Tag

 Change the Italic font use <i> tag or <em> tag
Example
<i> Italic Element </i>  Italic Element
Line Break Tag

 The next line before displaying the next element
 Not coded as a pair of opening and closing tags
 Code as <br>
Underline Tag
 Display text with underline use <u> tag
Example
<u>Hello </u>  Hello
Superscript Tag
 Display the math formula with super use <sup>
Example
x<sup>2</sup>  x2
Subscript Tag
 Display the math formula with subscript <sub>
Example
H<sub>2</sub>O  H2O
Strikethrough Tag
 Display the text with strikethrough use <strike>
Example
<strike>Strike Tag </strike>  Strike Tag

Lists
 Unordered List
 displays a bullet or list marker
 can be one of three types: disc (the default, square and circle)
Figure 6: Syntax of Unordered List

 Ordered List
 displays a numbering or lettering system to itemize the information contained
in the list
 used of numerals (default), uppercase letters, lowercase letters, uppercase
Roman numerals, and lowercase Roman numerals
Figure 7: Syntax of Ordered List

 Definition List or Description List
 is used for organizing terms and their descriptions
Figure 8: Syntax of Definition List

Hands on Practice (Lists)
<!Doctype html>

<html lang="en">
<head>
<meta chaset="UTF-8">
<title>Example of Lists</title>
</head>
<body>
<h3>The following is Ordered list</h3>
<ol type="I">
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>The following is Unordered List</h3>
<ul type="square">
<li>PHP</li>
<li>Java</li>
<ol type="i">
<li>J2SE</li>
<li>J2EE</li>
<li>J2ME</li>
</ol>
<li>Python</li>
</ul>
<h3>The following is definition list.</h3>
<dl>
<dt>Website</dt>
<dd>A location connected to the Internet
that maintain one or more pages on the World
Wide We.</dd>
</dl>
</body>
</html>

Figure 9: Lists Example

Abbreviation Tag
 Display the short form with long form use <abbr> tag
Example
This is <abbr title=”Hypertext Markup Language”>HTML</abbr>
Figure 10: Web Page document with abbr tag
Highlight Tag
 Display the text with highlight use <mark> tag
Example
<p>Phrase element is also called <mark> inline </mark> </p>
Figure 11: Web Page document with mark tag
Double quote Tag

 Display the text with double quote
Example
<p> This table is <q> The list of phrase elements </q> .</p>
Figure 12: Web Page document with q tag

Special Characters
 use in your web page document, you need to use special characters
 called entity character
Character Entity Name Code
“ Left curly quote marks “

” Right curly quote marks ”
‘ Left single quotation mark ‘
’ Right single quotation mark ’
© Copyright symbol ©
& Ampersand &
Empty space Nonbreaking space &nbsp:
- En- dash –
__ Long dash —
< Less - than <
> Greater-than >
| Vertical bar |
Table 1: Common Special Characters
Anchor Tag or Link Tag

 use to specify a hyperlink, to another web page or file that you want to display
 hrefdefines the link target
 targetUsing the attribute target, you can define a target frame where the link target
should be opened by the web browser.
target=“_self”. The target link opens in the specified frame in the current browser
window.
target="_blank". The web browser opens the link target in a new tab or browser
window.
Example
<a href=”example1.html”>Go to Example 1</a> Link HTML Page
<a href=”http://www.w3schools.com”> Learning Page </a> Link Web Site
<a href=”mailto:zinmaylatt24@gmail.com”> Go To Email</a> Email Link
Image Tag
 insert an image to web page use <img> tag

 srcinsert image source
 altdisplay text with no image
 width and height display image size
Example
<img src=”flower.jpg” alt=”Rose flower” width=100 height=100>
<img src=”images/flower.jpg” alt=”Rose flower” width=100 height=100>
Marquee Tag
 creating scrollable text or images within a web page use <marquee> tag
 direction- provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up or down
 scrollamount- provides value for speeding the marquee feature
 bgcolor- provides a background color where the value will be either the name of the
color or the hexadecimal color-code.
Example
<marquee direction=”up” scrollamount=10> Welcome to My Page </marquee>
Video Tag
 insert a video in a web page use <video> tag
 sourceused for inserting video
 controlsvideo controls should be displayed such as a play/pause button
 typevideo format
Example
<video width="320" height="240" controls>
<source src="videoplayback (4).mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Audio Tag
 insert a audio in a web page use <audio> tag
 sourceused for inserting video
 controlsaudio controls should be displayed such as a play/pause button
 typeaudio format (mp3mpeg, oggogg)
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="songs/song1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Table Tag
 to create a table use <table> tag
 define the row use <tr> tag
 define the col use <td> tag or <th> tag
 use <th> tag display text with bold and center
 <caption> tag displays table caption
 width, heightdefine table, row and col width and height
 borderdefine table border
 colspandefine merge column
 rowspandefine merge row
 aligndefine cell direction change horizontal (left (default), right, center)
 valign define cell direction change vertical (middle(default), top, bottom)
 cellpaddingSpecifies the space between the cell content and its border
 cellspacingBorder spacing specifies the space between the cells
Example 1
<table border="1" width="200px">
<caption>Student Lists</caption>
<tr>
<th >Name</th>
<th>Phone Number</th>
</tr>
<Tr>
<td>Su Su</td>
<td>098744</td>
</Tr>
<Tr>
<td>Mya Mya</td>

<td>78995</td>
</Tr>
<Tr>
<td>Zaw Zaw </td>
<td>098744</td>
</Tr>
<Tr>
<td>Aung Aung</td>
<td>098744</td>
</Tr>
</table>
Figure 13: Example of Table tag

Example 2
<table border=“1”>
<tr>
<td colspan= 2 > This span two columns </td>
</tr>
<tr>
<td>Column1</td>
<td>Column2</td>
</tr>
</table>

Figure 14: Table with a row that spans two columns

Example 3
<table border=“1”>
<tr>
<td rowspan= 2 > This span two columns </td>
<td>Row1 Column2</td>
</tr>
<tr>
<td>Row2 Column2</td>
</tr>
</table>
Figure 15: Table with a column that spans two rows
Form Elements
 Use forms to help with a variety of functions, including accepting visitor feedback,
encouraging visitors to send a news story to a friend or colleague, collecting e-mail
addresses for a newsletter, and accepting order information
 Introduces a very powerful tool for web developers- forms that accept information
from web page visitors
Syntax: <form>…………… </form>
1. Text Box Control
 accepts text or numeric information such as names, e-mail addresses, phone numbers,
and other text
 typedefine the form control (text)
 namedefine the text box name
 sizetextbox size
 maxlengthdefine the maximum length of the characters in text box

 valueinsert the text in text box display with black color

 placeholderdefine the hint text display with gray color
 requiredcheck the text box
 accesskeyuse the shortcut key
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Box Example</title>
</head>
<body>
<h2>Sample Text Box</h2>
<form>
E-mail:<input type="text”>
</form>
</body>
</html>
Figure 16: The <input> tag with type=“text” configures this form element
2. Password Box Control

 is similar to the text box, but it is used to accept information that must be hidden as it
is entered, such as a password
Example
<!DOCTYPE html>
<html>
<head>
<title>Password Box Example</title>
</head><body>
<h2>Sample Password Box</h2>

<form>Password: <input type="Password" name="pwd" id="pwd"></form>

</body>
</html>
Figure 17: Sample Password Box Example

3. Check Box Control
 allows the user to select one or more of a group of predetermined items
 more than one check box can be selected by the user
 typedefine the form control (checkbox)
 namedefine the checkbox name
 checkedauto checked start running
 valueget checkbox checked value
 requiredcheck the checkbox
Example
<!DOCTYPE html>
<html>
<head>
<title>Check Box Example</title>
</head>
<body>
<h2>Sample Check Box</h2>
<form>Choose the browsers you use:<br>
<input type="checkbox" name="IE" id="IE" value="yes">Internet
Explorer<br>
<input type="checkbox" name="Firefox" id="Firefox" value="yes">Firefox<br>
<input type="checkbox" name="Oprea" id="Oprea" value="yes">Opera
<br></form></body></html>

Figure 18: Sample Check Box Example

4. Radio Button Control
 allows the user to select exactly one (and only one) choice from a group of
predetermined items
 each radio button in a group is given the same name attribute and a unique value
attribute
 because the name attribute is the same, the elements are identified as part of a group
by the browsers and only one may be selected
Example
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Example</title>
</head>
<body>
<h2>Sample Radio Buttons</h2>
<form>Select your favorite browser:<br>
<input type="radio" name="favbrowser" id="favIE" value="IE">Internet
Explorer<br>
<input type="radio" name="favbrowser" id="favFirefox" value="Firefox">
Firefox<br> <input type="radio" name="favbrowser" id="favOprea"
value="Opera">Opera<br></form></body></html>

Figure 19: Sample Radio Button Example

5. Submit Button Control
 is used to submit the form
 when click it, triggers the action method on the form element and causes the browser
to send the form data to the web server
 the web server will invoke the server-side processing program or script listed on the
form’s action property
 typedefine the form controls
 valueshow the text in button control
6. Reset Button Control
 is used to reset the form fields to their initial values
Example
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h2>Sample Form</h2>
<form>
Email: <input type="text" name="username" id="username"><br><br>
<input type="submit"> <input type="reset">
</form></body></html>
Figure 20: Submit and Reset Button Example
7. Text Area Control

 configures a scrolling text box

 text contained between the tags will display in the scrolling text box area
 colsdefine the text area col or width
 rowsdefine the text area row or height
 placeholder, required, name, maxlength that similar to text box control
Example
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text Box</title>
</head>
<body>
<h2>Sample Scrolling Text Box</h2>
<form>
Comments:<br>
<textarea name="comments" id="comments" cols="40" rows="2">Enter your
comments here</textarea>
</form>
</body></html>
Figure 21: Sample Text Area Example

8. Select Box Control
 is also known by several other names, including select box, drop-down box, and
option box
 is configured with one select element and multiple option elements
 select tag
o namedefine the select box name
o sizeselect box control size(show the element list size)
o multiplechoose one or more elements

 option tag
o valueget select box control each element value
o selectedchose the selected element in select box control
Example
<!DOCTYPE html>
<html>
<head><title>Select List</title>
</head><body>
<h2>Select List: One Initial Visible Item</h2>
<form>
<select size="1" name="favbrower" id="favbrower">
<option>Select your favorite browser</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Opera">Opera</option>
</select>
</form>
</body>
</html>
Figure 22: Select Box Control Example

9. Calendar Control
 show the calendar in web page
Example
<h1>Choose A Date</h1>
<label for="myDate">Choose A Date:</label>
<input type="date" name="myDate" id="myDate">

Figure 23: Calendar Control Example

10. Data List Control
 The datalist is configured using three elements: an input element, the datalist element,
and one or more option elements.
 Only browsers that support the HTML5 datalist element will display and process the
datalist items.
 Other browsers ignore the datalist element and render the form control as a text box.
Example
<label for="color">Favorite Color:</label>
<input type="text" name="color" id="color" list="colors">
<data list id="colors">
<option value="red">
<option value="green">
<option value="blue">
<option value="yellow">
<option value="pink">
<option value="black">
</datalist>
Figure 24: Data List Control Example

11. Image Button Control
 using the <input> tag along with type=“image” and a src attribute with the value of
the image of the image file
Example

<input type="image" src="login.jpg" alt="Login Button">
12. Field Set and Legend Control

 Using the fieldset element, which will cause the browser to render a visual cue, such
as an outline or a border, around form elements grouped together within the fieldset.
 <fieldset></fieldset>
 Legend element provides a text description for the fieldset grouping.
 <legend></legend>
Example
<fieldset>
<legend>Billing Address</legend>
<label>Street: <input type="text" name="street" id="street" size="54">
</label><br><br>
<label>City: <input type="text" name="city" id="city"> </label>
<label>State: <input type="text" name="state" id="state" size="5"
maxlength="2"></label>
<label>Zip: <input type="text" name="zip" id="zip" size="5" maxlength="2"></label>
</fieldset>
Figure 25: Form controls that are all related to a mailing address
13. Email Text Box Control

 The e-mail address input form control is similar to the text box.
 Its purpose is to accept information that must be in e-mail format, such as
“DrMorris2010@gmail.com”.
Example
<label for=“email”>E-mail:</label>
<input type=“email” name=“myEmail” id=“myEmail”>

Figure 26: Email Text Box Control Example

14. URL Input Control
 The URL input form control is similar to the text box.
 It is intended to accept any valid type of URL or URL,
suchhttp://webdevfoundations.net.
Example
<label for=“myWebsite”>Suggest a Website:</label>
<input type=“url” name=“myWebsite” id=“myWebsite”>
Figure 27: URL Input Control Example

15. Spinner form Control
 use for number range value
 minminimum number value in control
 maxmaximum number value in control
Example
<h1>Choose A Number</h1>
<label for="myChoice">Choose a number between 1 and 100:</label>
<input type="number" name="myChoice" id="myChoice" min="1" max="10">
Figure 28: Spinner Form Control Example
16. Slider Form Control

 similar to sound volume low to high
Example
The HTML code is:

<h1>Choose A Number</h1>
<label for="myChoice">Choose a number between 1 and 100:</label><br>Low
<input type="range" name="myChoice" id="myChoice"> High<br><br>
<input id="mySubmit" type="submit" value="Send">
<input id="Reset" type="Reset" value="Reset">
Figure 29: Slide Form or Range Control Example

17. Telephone Number Control
 The telephone number input form control is similar to the text box.
 Its purpose is to accept a telephone number.
Example
<label for=“mobile”>Mobile Number:</label>
<input type=“tel” name=“mobile” id=“mobile”>
18. Color Well Form Control
 display the color choose box
Example
<h1>Choose A Color</h1>
<label for="myColor">Choose A Color:</label>
<input type="color" name="myColor" id="myColor">
Figure 30: Color Choose Box Example

Horizontal Rule
 A horizontal Rule Element visually separates areas of a page and configures a
horizontal line across a web page.
 The horizontal Rule Element does not contain any text.
 It is coded as a void tag and not in a pair of opening and closing tag.

 HTML5 syntax for the horizontal rule is: <hr>

Example
<p>This is a paragraph1.</p>
<hr size="30" width="200" align="left">
<hr size="30" width="200" align="left" noshade>
<hr size="60" width="400" align="left" color="red">
Figure 31: Horizontal Rule Examples

Meter Element
 Meter element displays a visual gauge of a numeric value within a known range,
typically as part of a bar chart.
Example
<h1>Monthly Browser Report</h1>
<meter value="14417" min="0” max="14417">14417</meter>14,417 Total Visits<br>
<meter value="7000" min="0" max="14417">7000</meter>7000 Firefox<br>
Figure 32: Web Page using Meter Element

Progress Elements
 Progress element displays a bar that depicts a numeric value within a specified range.
Example
<h1>Progress Report</h1>
<progress value="5000" max="10000">5000</progress>
Progress Toward Our Goal

Figure 33: Web Page using Progress Element

Image Map
 An image map is an image that can be used as one or more hyperlinks.
 An image map will have multiple clickable or selectable areas that link to another web
page or website.
 The selected areas are called hotspots.
 An image map uses two new elements: map and area
 <map> is used to begin and end the image map.
 <area> tag define the coordinates or edges of the map area and uses shape,
coords, alt and href attributes.
Example
<img src="images/workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="204,289,104,338" alt="Computer" href="example1.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="example2.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="samplepage.html">
</map>
Favorites Icon
 The favorites icon - a favicon, a square image (either 16x16 pixels or 32x32 pixels)
associated with a web page.
 <link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
Cascading Style Sheet (CSS)

Inline Styles
 Code in the tags
 Apply the style attribute only to the specific element
Embedded Styles
 Define in the header section
 Apply the <style> element
External Styles
 Separate text file which .css file extension
 Use the link element in the head section
 Associate with the web pages

Imported Styles
 Similar to external styles
 Using the @import directive
CSS Selectors and Declarations

 Style sheets are composed of style rules
 Each rule contains a selector and declaration
 CSS Style Rule Selector –html element name, class name, id name
 CSS Style Rule Declaration:
 Contain property and value
 Enclose within braces
 Use the colon (:)
Selector property value

Properties
body { color : blue; }
Figure 34: Using CSS to set the text color to blue

CSS Text Properties with value
Property Description Value
background-color Configures the background color of an element color name
color Configures the text (foreground) color of an color name
element
font-family Configures the font typeface of the text font name
font-size Configures the size of the font(small/medium/large numeric value or
or px) text value
font-weight Configures the boldness of text bold
font-style Configures text displayed in italics italic
line-height Configures the height of the line of text percentage or
number
text-align Configures alignment of the text left/right/center
vertical-align Configures alignment of vertically the text top/bottom/middle
text-indent Configures the indentation of the first line of text numerice (px or

within the element em or pt)

text-decoration Modifies the appearance of the text none, underline ,
overline, or line-
through
list-style-type Configures the style of the list marker none/disc/
Example circle/square/
list-style-type: circle; decimal/upper-
alpha/lower-
alpha/lower-
roman
list-style-image Image replacement for the list marker image

Example( list-style-image: url (‘sqpurple.gif’);
list-style-position Configures placement of the list marker inside/outside
Example list-style-position: outside;
display Configure how and if the element is displayed none/block/inline/
inline-block
Table 2: CSS Text Properties
Inline Style (Example)
<h1style=“color:#cc0000;
background-color:#cccccc”>
This is displayed as a red heading on a gray background
</h1>
Figure 35: Inline Style Example

Embedded Style (Example)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Styles</title>

<style>
body { backgrond-color:#ccffff;
color: #000033; }
</style>
</head>
<body>
<h1>Embedded CSS</h1>
<p>This page uses embedded styles.</p>
</body>
</html>
Figure 36: Embedded CSS Style Example

External Style Sheet
 Separate the CSS from the web page document
 Text file :
 Extension “.css”
 Contains only style rules
 Does not contain any HTML tags
 Use the link element to associate with a web page
Example: <link rel=“stylesheet” href=“color.css” type=“text/css”>
site.css
client.html index.html about.html
Figure 37: Applying Single Style Sheet to multiple documents

Configuring CSS Properties with CSS class and id Selectors
class Selector
 Apply a CSS declaration to a certain HTML element
 Configure the ‘class’ name as the selector

 Place a dot (.) in front of the class name in the style sheet
 CSS:
 .feature { color: #ff0000;}
 HTML
 <li class=“feature”>Usability Studies</li>
 “class” is an html attribute
Example
<html>
<head>
<title> Example of Class Selector </title>
<style>
.feature { color: #ff0000;}
</style>
</head>
<body>
<ul>
<li>E-Commerce Solutions</li>
<li class=“feature”>Usability Studies</li>
<li class=“feature”>Search Engine</li>
</ul>
</body>
</html>
Figure 38: class selector example

id Selector
 Apply a CSS rule uniquely to a single area
 Configure the ‘id’ name as the selector
 Place a hash mark (#) in front of the id name in the style sheet
 CSS:
 #footer { color: #333333; font-size: .75em; font-style: italic;}
 HTML:
 <div id=“footer”>
This paragraph will be displayed using styles configured in the footer id
</div>
 “id” is an html attribute
Example
<html>
<head>
<title> Example of id Selector </title>
<style>
#footer { color: #ff0000;
font-size: .75em;
font-style: italic;}
</style>
</head>
<body>
<div id=“footer”>
Copyright © 2012 Ma Ma
</div>
</body>
</html>
Contextual Selector
 Refer to as descendent selectors
 Specify an element within the context of its container(parent) element
 List the container selector followed by the specific selector
 Advantages: reduce the number of classes and ids
Example: div p { color: #ff0000;}
Figure 39: Example of Contextual Selector Work

Example
<html>
<head>
<style>
div p { color: #ff0000; }

</style>
</head>
<body>
<div>
<p> This is a paragraph inside a div element</p>
<p> This is a another paragraph inside a div element</p>
</div>
<p> This is a paragraph, not inside a div element.</p>
</body>
</html>
Figure 40: Example of Contextual Selector

Span Element
 Defines a section on a web page
 Not physically separate from other areas
 Refer to as inline display
 Format an area that is contained within block element
Example
<html>
<head>
<style>
.companyname { font-weight: bold; font-family: Georgia, “Times New Roman”, serif;
font-size: 1.25em; }
</style>
</head>
<body>
<p>
<span class=“companyname”> Trillium Media Design</span>
will bring your company’s Web presence to the next level.
</p>
</body>

</html>
Figure 41: Example of Span Element

CSS Border Properties
 The CSS border properties allow you to specify the style, width, and color of an
element's border.
 CSS Syntax: border: border-width border-style border-color;
 To specify all the individual border properties for just one side:
 border-left
 border-right
 border-top
 border-bottom
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Example</title>
</head>
<body>
<h1 style= "border-width: 2px; border-style:solid; border-color: Tomato;">Hello
World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Figure 42: Border Properties Example

CSS Border Style Properties
 The border-style property sets the style of an element's four borders. This property
can have from one to four values.
 CSS Syntax: border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|
outset;

 To change the style of the bottom, left, top, and right borders of an element
individually using the following properties −
 border-bottom-style
 border-top-style
 border-left-style
 border-right-style
Example
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-top-style: solid;}
.double {border-right-style: double;}
.groove {border-bottom-style: groove;}
.ridge {border-left-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: dotted dashed solid
double;}
Figure 43: Border Style Properties

CSS Padding Properties
 The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
 The padding property sets the left, right, top and bottom padding (space) of an
element.
 This can take a value in terms of length or %.
 CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom

 padding-left
Background Images
 configure a background image
body { background-image: url(texturel.png); }
 background-color
body { background-color: #99cccc;background-image: url(background.jpg); }
 The background-repeat property sets if/how a background image will be repeated. It
include repeat (default), repeat-y (vertical repeat), repeat-x (horizontal repeat) and no-
repeat (no repeat).
Figure 44: Web page using background-repeat property

Background Position Property
 The background-position property sets the starting position of a background image. It
include percentages; pixel values; or left, top, center, bottom and right.
Example
h2{
background-image: url(trillium.jpg);
background-position: right;
background-repeat: no-repeat;
}
Figure 45: Web page using background-position property

Background Attachment Property
 The background-attachment property to configure whether the background image
remains fixed in place or scrolls along with the page in the browser viewport.
 The background-attachment property include fixed and scroll.

Figure 46: Web page using background-attachment property

Background clip property
 The background-clip property sets the display of the background image with
 content-box (clips the display to the area behind the content)
 padding-box (clips the display to the area behind the content and padding)
 border-box (default; clips the display to the area behind the content, padding and
border; similar to the padding-box property)
Example
#example1 {
border: 10px dotted black;
padding: 15px;
background: lightblue;
background-clip: border-box;
}
Figure 47: Web page using background-clip properties

Background Origin property
 The background-origin property positions the background image with
 padding-box (default; positions relative to the padding area)
 border-box (positions relative to the border area)
 content-box (positions relative to the content area)
Example

#example1 {
border: 10px dashed black;
padding: 25px;
background: url(trilliumsolo.jpg);
background-origin: padding-box;
Figure 48: Web page using background-origin property

Background Size Property
 The background-size property can be used to resize or scale the background image.
 a pair of percentage values ( width, height)
 a pair of pixel values (width, height)
 auto (The background image is displayed in its original size)
 contain (the background image to be scaled to vertically fill the container)
 cover (the background image to be scaled to horizontally fill the container)
Example
#example1 {
border: 2px solid black;
padding: 25px;
background: url(myislandback.jpg);
background-size: auto;
Figure 49: Web page using background-size property

Rounded Corners

 border-radius property – to create rounded corners and soften up those rectangles.

border-radius: 25px;
 border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-
top-right-radius.
 Different style declarations to round those corners:
 -webkit-border-radius (for WebKit browsers)
 -moz-border-radius (for Gecko browsers)
 border-radius (W3C Draft Syntax)
Example
#example1 {
border: 2px solid red;
padding: 10px;
border-radius: 25px; }
Figure 50: Example of border-radius property

Box Shadow Property
 box-shadow property - to create a shadow effect on block-display elements such as div
and paragraph elements.
 Numeric pixel value for the shadow’s horizontal offset
 Numeric pixel value for the shadow’s vertical offset:
 Optional: for the spread distance:
 Valid color value
Example
box-shadow: 5px 5px 5px #828282;
Text Shadow Property

 text-shadow property – configures a shadow effect on text and is supported by most
recent versions of modern browsers.
 Numeric pixel value for the shadow’s horizontal offset
 Numeric pixel value for the shadow’s vertical offset:
 Numeric pixel value for the blur radius:
 Valid color value

Example
text-shadow: 5px 5px 5px #828282;
Opacity Property
 opacity property – configures the transparency of the background color.
 Opacity value range from 0 (completely transparent) to 1 (no transparency).
Position Property
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).
1. Relative Position
 The position property specifies the type of positioning method used for an element.
The values are static, relative, fixed, absolute and sticky.
 Use relative positioning to change the location of an element slightly, relative to
where it would otherwise appear with normal flow.
 Left - Right
 Top - Bottom
Example
<!DOCTYPE html>
<html lang="en">
<head><title>Relative positioning</title>
<style>
#myContent { position: relative;left:30px;font-family: Arial, sans-serif; }
h1 { background-color: #cccccc;padding: 5px;color:#000000; }
</style></head><body>
<h1>Relative Positioning</h1><div id="myContent">
<p> This paragraph uses CSS relative positioning to be placed 30 pixels in from the left
side.</p></div>
</body></html>

Figure 51: Example of relative position property

2. Absolute Position
 Absolute position is relative to the nearest positioned ancestor, has no positioned
ancestors, it uses the document body and moves along with page scrolling.
 Use absolute positioning to specify the precise location of an element outside of the
normal flow in its container element.
 Left - Right
 Top - Bottom
CSS Float Property

 Place an element on the left or right side of its container, allowed text and inline
elements to warp around it.
 The element is removed from the normal flow of the page, though still remaining a
part of the flow (in contrast to absolute positioning).
 Use float with a list of hyperlinks to create horizontal menu.
 Let the first letter of a paragraph float to the left and style the letter.
 Float property values are left, right, none and inherit.
Example
<!DOCTYPE html>
<html lang="en">
<head><title>Float</title><meta charset="utf-8"><style>
p { font-family: Arial, sans-serif; }
h1 { background-color: #ABC682;
padding: 5px;
color:#000000; }
#yls { float: right;
margin:0 0 5px 5px;
border: 1px solid #000000; }
</style></head><body><h1>Wildflowers</h1>

<div><img id="yls" src="flower.jpg" alt= "Yellow Lady Slipper" height="100"

width="100">
<p> The Yellow Lady Slipper grows in wooded areas and blooms in June each year.
The flower is a member of the orchid family.</p>
<h2>Be Green When Enjoying Wildflower</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all
possible ways-support organizations to preserving their habitat.</p></body></html>
Figure 52: Example of float property

CSS Clearing a Float
 The clear property is often used to terminate or clear, a float. The value of left, right,
both.
 The clear property applies to floating on non-floating elements.
 Specifies on which side of an element where floating elements are not allowed to
float.
 A common technique to clear a float within a container element is to add a line break.
Overflow Property
 This property specifies whether to clip content or to add scrollbars when an element’s
content is too big to fit in a specified area.
 The overflow property specifies what should happen if content overflows on element
box.
 The overflow property only works for block elements with a specified height.
 Overflow property of value is visible, hidden, scroll and auto.
CSS interactivity Pseudo-Classes

Example
a:hover
{
color: #ff0000;
}
Basic Two Column Page Layout
 A common design for a web page is a two-column layout. This can be accomplished
with CSS by configuring one of the columns to float on the web page.
Figure 53: Example of two column page layout

Hands on Practice 1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}
li {
float: left;}
li a, .dropbtn {
display: inline-block;color: white;text-align: center;padding: 14px 16px;
text-decoration:none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;position: absolute;background-color: #f9f9f9; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;padding: 12px 16px;text-decoration: none;display: block; text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body></html>
Figure 54: Navigation Links with submenu Example

Hands on Practice 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;padding: 10px;text-align: center;
}
.topnav { overflow: hidden;background-color: #333;
}
.topnav a {
display: inline-block;color: #f2f2f2;text-align: center; padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;color: black;
}
.column {
float: left;padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row::after {
content: ""; display: table; clear: both;
}
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
.footer p {
background-color: #f1f1f1;padding: 5px; text-align: center;
}
p{
text-align: justify;
}
.t{border-radius: 5px;border-color: blue;border-style:outset;}
.btn{border-radius: 5px;background-color: blueviolet;color: wheat;line-height:25px ;}
</style>
</head>
<body>
<div class="header">
<h1>Web Development Technology HTML + CSS</h1>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">Registration</a>
<a href="#" class="dropbtn">Course
</a>
</div>
<div class="row">
<div class="column side">
<h2>Course</h2>
<p>
<ul>
<li>HTML & CSS</li>
<li>PHP</li>
<li>J2SE</li>
<li>J2EE</li>
</ul>
</p>
</div>
<div class="column middle">

<h2>HTML & CSS</h2>
<p>
HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the two
primary programming languages upon which all modern web infrastructures are built. These
two programming languages tell your computer how to display a web page and distinguish

one web element from another. Using HTML & CSS, you can design rudimentary web pages
and begin the process of learning how to create dynamic and evocative web pages.
</p>
<p>
Using HTML & CSS, you can design web pages and begin the process of learning
how to create dynamic and static web pages.
</p>
</div>
<div class="column side">
<table>
<caption><h2>Registration</h2></caption>
<tr>
<td>Name</td>
</tr>
<tr>
<td class="t"><input type="text" size="20" placeholder="Enter Name.."></td>
</tr>
<tr>
<td>Phone Number</td>
</tr>
<tr>
<td class="t"><input type="text" size="20" placeholder="Enter Phone Number
.."></td>
</tr>
<tr>
<td>Attend course</td>
</tr>
<tr>
<td>
<select>
<option>HTML & CSS</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
</td>
</tr>
<tr>
<td>Pay Fees</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo" checked>Kpay
<input type="radio" name="rdo">Wave
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Register" class="btn">
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>Department of Information Technology Suppporting and Maintenance </p>
</div>
</body>
</html>

Figure 55: Sample Menu Page

HTML Css Note

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css Note

Uploaded by

Copyright:

Available Formats

Web Development Technology (HTML+CSS)

HyperText Markup Language (HTML) and Cascading Style

Department of Information Technology Supporting and Maintenance

Introduction of the Internet and World Wide Web Network

 Wide Area Network(WAN)

Department of Information Technology Supporting and Maintenance Page 1

Server (Web Server)

Figure 1: Web client and Web server

File Transfer Protocol (FTP)

Hypertext Transfer Protocol (HTTP)

Department of Information Technology Supporting and Maintenance Page 2

Uniform Resource Locator (URL)

Figure 2: URL describing a file within a folder

Web Development Technology

HTML5 Web Page

Department of Information Technology Supporting and Maintenance Page 3

Example of Web Page

Department of Information Technology Supporting and Maintenance Page 4

<h1>Heading level 1</h1>

Figure 4: Web Page document with six levels headings

Figure 5: Web Page document with a paragraph

Bold Tag or Strong Tag

Department of Information Technology Supporting and Maintenance Page 5

 Change the bold font use <b> tag or <strong> tag

Italic Tag or Emphasis Tag

Line Break Tag

Department of Information Technology Supporting and Maintenance Page 6

Figure 6: Syntax of Unordered List

Figure 7: Syntax of Ordered List

Figure 8: Syntax of Definition List

Department of Information Technology Supporting and Maintenance Page 7

Department of Information Technology Supporting and Maintenance Page 8

Figure 9: Lists Example

Figure 10: Web Page document with abbr tag

Figure 11: Web Page document with mark tag

Double quote Tag

Figure 12: Web Page document with q tag

Department of Information Technology Supporting and Maintenance Page 9

“ Left curly quote marks &ldquo;

Anchor Tag or Link Tag

 insert an image to web page use <img> tag

Department of Information Technology Supporting and Maintenance Page 12

Figure 13: Example of Table tag

Department of Information Technology Supporting and Maintenance Page 13

Figure 14: Table with a row that spans two columns

Figure 15: Table with a column that spans two rows

Department of Information Technology Supporting and Maintenance Page 14

 valueinsert the text in text box display with black color

2. Password Box Control

Department of Information Technology Supporting and Maintenance Page 15

<form>Password: <input type="Password" name="pwd" id="pwd"></form>

Figure 17: Sample Password Box Example

Department of Information Technology Supporting and Maintenance Page 16

Figure 18: Sample Check Box Example

Department of Information Technology Supporting and Maintenance Page 17

Figure 19: Sample Radio Button Example

Figure 20: Submit and Reset Button Example

7. Text Area Control

Department of Information Technology Supporting and Maintenance Page 18

 configures a scrolling text box

Figure 21: Sample Text Area Example

Department of Information Technology Supporting and Maintenance Page 19

Figure 22: Select Box Control Example

Department of Information Technology Supporting and Maintenance Page 20

“ Left curly quote marks “