Scribd
Upload
28 views

HTML Css Note

HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the primary languages used to build web pages. HTML defines the structure and layout of web page content using tags, while CSS controls the visual styling and formatting. Together, HTML and CSS allow you to design basic web pages and learn how to create more advanced dynamic pages. Common HTML tags include headings, paragraphs, lists, and bold/italic text. CSS can modify text styles, colors, and positioning of elements. Mastering HTML and CSS fundamentals is the first step in becoming a web developer.

Uploaded by

Rosan Ojha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

HTML Css Note

HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the primary languages used to build web pages. HTML defines the structure and layout of web page content using tags, while CSS controls the visual styling and formatting. Together, HTML and CSS allow you to design basic web pages and learn how to create more advanced dynamic pages. Common HTML tags include headings, paragraphs, lists, and bold/italic text. CSS can modify text styles, colors, and positioning of elements. Mastering HTML and CSS fundamentals is the first step in becoming a web developer.

Uploaded by

Rosan Ojha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 50

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


Web Development Technology (HTML+CSS)

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


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 2


Web Development Technology (HTML+CSS)

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>

Department of Information Technology Supporting and Maintenance Page 3


Web Development Technology (HTML+CSS)

<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

Department of Information Technology Supporting and Maintenance Page 4


Web Development Technology (HTML+CSS)

<h1>Heading level 1</h1>


<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

<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

Department of Information Technology Supporting and Maintenance Page 5


Web Development Technology (HTML+CSS)

 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

Department of Information Technology Supporting and Maintenance Page 6


Web Development Technology (HTML+CSS)

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>

Department of Information Technology Supporting and Maintenance Page 7


Web Development Technology (HTML+CSS)

<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>

Department of Information Technology Supporting and Maintenance Page 8


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 9


Web Development Technology (HTML+CSS)

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 &ldquo;


” Right curly quote marks &rdquo;
‘ Left single quotation mark &lsquo;
’ Right single quotation mark &rsquo;
© Copyright symbol &copy;
& Ampersand &amp;
Empty space Nonbreaking space &nbsp:
- En- dash &ndash;
__ Long dash &mdash;
< Less - than &lt;
> Greater-than &gt;
| Vertical bar &#124;
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:[email protected]”> Go To Email</a> Email Link

Image Tag
Department of Information Technology Supporting and Maintenance Page 10
Web Development Technology (HTML+CSS)

 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
Department of Information Technology Supporting and Maintenance Page 11
Web Development Technology (HTML+CSS)

<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>

Department of Information Technology Supporting and Maintenance Page 12


Web Development Technology (HTML+CSS)

<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>

Department of Information Technology Supporting and Maintenance Page 13


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 14


Web Development Technology (HTML+CSS)

 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>

Department of Information Technology Supporting and Maintenance Page 15


Web Development Technology (HTML+CSS)

<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>

Department of Information Technology Supporting and Maintenance Page 16


Web Development Technology (HTML+CSS)

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>

Department of Information Technology Supporting and Maintenance Page 17


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 18


Web Development Technology (HTML+CSS)

 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

Department of Information Technology Supporting and Maintenance Page 19


Web Development Technology (HTML+CSS)

 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">

Department of Information Technology Supporting and Maintenance Page 20


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 21


Web Development Technology (HTML+CSS)

<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
“[email protected]”.
Example
<label for=“email”>E-mail:</label>
<input type=“email” name=“myEmail” id=“myEmail”>

Department of Information Technology Supporting and Maintenance Page 22


Web Development Technology (HTML+CSS)

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:

Department of Information Technology Supporting and Maintenance Page 23


Web Development Technology (HTML+CSS)

<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.

Department of Information Technology Supporting and Maintenance Page 24


Web Development Technology (HTML+CSS)

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


Example
<p>This is a paragraph1.</p>
<hr size="30" width="200" align="left">
<p>This is a paragraph2.</p>
<hr size="30" width="200" align="left" noshade>
<p>This is a paragraph3.</p>
<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

Department of Information Technology Supporting and Maintenance Page 25


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 26


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 27


Web Development Technology (HTML+CSS)

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>

Department of Information Technology Supporting and Maintenance Page 28


Web Development Technology (HTML+CSS)

<meta charset="utf-8">
<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

Department of Information Technology Supporting and Maintenance Page 29


Web Development Technology (HTML+CSS)

 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
Department of Information Technology Supporting and Maintenance Page 30
Web Development Technology (HTML+CSS)

</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 &copy; 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; }

Department of Information Technology Supporting and Maintenance Page 31


Web Development Technology (HTML+CSS)

</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>

Department of Information Technology Supporting and Maintenance Page 32


Web Development Technology (HTML+CSS)

</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;

Department of Information Technology Supporting and Maintenance Page 33


Web Development Technology (HTML+CSS)

 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

Department of Information Technology Supporting and Maintenance Page 34


Web Development Technology (HTML+CSS)

 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.

Department of Information Technology Supporting and Maintenance Page 35


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 36


Web Development Technology (HTML+CSS)

#example1 {

border: 10px dashed black;

padding: 25px;

background: url(trilliumsolo.jpg);

background-repeat: no-repeat;

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-repeat: no-repeat;

background-size: auto;

Figure 49: Web page using background-size property


Rounded Corners

Department of Information Technology Supporting and Maintenance Page 37


Web Development Technology (HTML+CSS)

 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

Department of Information Technology Supporting and Maintenance Page 38


Web Development Technology (HTML+CSS)

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>
<meta charset="utf-8">
<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>

Department of Information Technology Supporting and Maintenance Page 39


Web Development Technology (HTML+CSS)

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>

Department of Information Technology Supporting and Maintenance Page 40


Web Development Technology (HTML+CSS)

<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

Department of Information Technology Supporting and Maintenance Page 41


Web Development Technology (HTML+CSS)

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

Department of Information Technology Supporting and Maintenance Page 42


Web Development Technology (HTML+CSS)

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>
Department of Information Technology Supporting and Maintenance Page 43
Web Development Technology (HTML+CSS)

<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
Department of Information Technology Supporting and Maintenance Page 44
Web Development Technology (HTML+CSS)

.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;
Department of Information Technology Supporting and Maintenance Page 45
Web Development Technology (HTML+CSS)

}
.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

Department of Information Technology Supporting and Maintenance Page 46


Web Development Technology (HTML+CSS)

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>
Department of Information Technology Supporting and Maintenance Page 47
Web Development Technology (HTML+CSS)

</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>

Department of Information Technology Supporting and Maintenance Page 48


Web Development Technology (HTML+CSS)

Figure 55: Sample Menu Page

Department of Information Technology Supporting and Maintenance Page 49

You might also like