Scribd
Upload
75 views

Lec02 HTML Css PDF

The document discusses HTML (Hypertext Markup Language) and how it is used to create web pages. It provides an overview of common HTML elements (tags) like <html>, <body>, <h1>, <p>, <a>, <img>, <table>, <ul>, <ol>, and <li> and how they are used to structure and format content. It also discusses how CSS can be used to further control the styling and layout of HTML elements. Examples are provided to demonstrate how different HTML elements and tags can be combined to create basic web pages.

Uploaded by

Kouji Tomas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

Lec02 HTML Css PDF

The document discusses HTML (Hypertext Markup Language) and how it is used to create web pages. It provides an overview of common HTML elements (tags) like <html>, <body>, <h1>, <p>, <a>, <img>, <table>, <ul>, <ol>, and <li> and how they are used to structure and format content. It also discusses how CSS can be used to further control the styling and layout of HTML elements. Examples are provided to demonstrate how different HTML elements and tags can be combined to create basic web pages.

Uploaded by

Kouji Tomas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

EEE 13

Lecture 2
GUI
HTML
CSS
User Interfaces
● Method for a computer or device to interact with
a user
● Device receive inputs/command
● Device provides feedback/response

● General types of user interface for computers


● Command-line (text-based)
● Graphical User Interface (GUI)
Web User Interface
● Special type of GUI to interact with a web
browser/server

● Generally used to present data transmitted over


a network to a user

● Most common standard is HTML


HTML
● HyperText Markup Language
● Description on how information is to be
processed/presented by a web browser
● Tag-based language

● HTML Document
● Actual webpage, described in HTML
● Usually has file extension .htm or .html
General Flow
● HTML is interpreted by the browser

Web
Browser
HTML
(e.g. IE,
Internet Firefox,
GUI

Safari,
Opera,etc)

Device
Sample HTML
<html> HTML Tags
<body>
Hello World!
</body>
</html>

● In general,HTML tags are in pairs (start and end)


● Case insensitive
– lower case is recommended by World Wide Web Consortium
Other Terminologies
● Content
● Refers to the text in-between the start and end tags
● Attributes
● Information/property associated with the tag
● Values can be enclosed in double quotes (") , single
quotes (') or have no enclosures (e.g. 1-word value)
● Element
● Everything from start to end tag

<body bgcolor="red">Hello world!</body>


Element
Tools
● Plain Text editor
● e.g., Notepad, vi, vim

● Web browser
● Usually comes with the operating system
● e.g., Internet Explorer, Safari, Firefox, Chrome
Sample 1
● Display web page with "Hello World" body

<html>
<body>Hello World</body>
</html>

● Try playing with body attributes


● bgcolor="red" bgcolor="blue" etc ...
● text="green" text="cyan" etc ...
Required Elements
<html>
● Declares the HTML section of the file

<body>
● Defines the content of the page
Common Body Elements
<h#>
● Headings
– h1 = main
– h2 = subheading
– etc

<p>
● Paragraph
Sample 2
<html>
<body>
<h1>Introduction</h1>
<p>The quick brown fox jumps over the lazy dog.
Mary had a little lamb.</p>
<p>Every good boy does fine. My very eager
mother just served us noodles.</p>
</body>
</html>
Sample 3
<html>
<body>
<h1>Animals</h1>
<h2>Herbivores</h2>
<h3>Cow</h3>
<h3>Rabbit</h3>
<h2>Carnivores</h2>
<h3>Wolf</h3>
</body>
</html>
Empty Elements
● Tags which do not have close tags
● Examples:
<br> = newline
<hr> = horizontal line

● Some people recommend adding a "/" to empty


elements
● e.g. <br/>, <hr/>
● Compliant with XHTML
Sample 4
<html>
<body>
Line 1<br/>Line 2<br/>Line 3<br/>
<hr/>
Statement 1<br/>Statement 2
</body>
</html>
Formatting
● Formatting tags
<b> = Bold
<i> = Italics
<sub> = Subscript
<sup> = Superscript

<font> (will no longer be used in HTML5)


– size attribute = size of font
– face attribute = family (e.g. arial)
– color attribute = color
Sample 5
<html>
<body>
<p>Testing <b>bold</b> and <i>italics</i></p>
<p>Testing <sup>Superscript</sup></p>
<p>Testing <sub>Subscript</sub></p>
<p>Testing <font size=5 color=“red“>Font size 5 color red</font></p>
<p>Testing <font face=“arial“>arial</font></p>
</body>
</html>
Links
<a>
● Anchor / link / hyperlink tag
● Common Attributes
– href = link/url (anything you can place in the address bar)
– target = where to open the link (_blank or _top [default] )
– title = Appears when you hover the mouse on the link
– name = name of location; used for marking specific
sections of the page
Sample 6
<html>
<body>
<h1>UP Diliman</h1>
<a href="http://www.upd.edu.ph">Default</a> <br/>
<a href="http://www.upd.edu.ph" title=“UPD“>Title</a> <br/>
<a href="http://www.upd.edu.ph" target=“_blank“>Blank</a>
<br/>
<a href="#bottom" >Bookmark</a> <br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="bottom"></a>End
</body>
</html>
Images
<img>
● Image tag
● Common attributes
– src = link/url
– width
– height
– alt = alternate text in case image does not load
Sample 7

<html>
<body>
<img src="http://www.upd.edu.ph/imag/updbanner01.jpg">
<br/>Wrong link<br/>
<img src="http://www.upd.edu.ph/imag/updbanner01.jpg"
alt=“UP banner“>
</body>
</html>
Sample 8

<html>
<body>
<h1>Image link</h1>
<a href="http://www.upd.edu.ph">
<img src="http://www.upd.edu.ph/images/UPD_head.jpg">
</a>
</body>
</html>
Relative Paths
● urls that do not start with http:// are assumed to
be relative paths
● Relative to the location of the HTML file

● Examples
<img src="sample.jpg">
<a href="sample.htm">
<img src="images/logo.jpg">
Sample 9
● Write this in test.htm
<html>
<body>
Go to <a href="new.htm">New File</a>
<br/>
The quick brown fox jumps over the lazy dog
</body>
</html>

● Write this in new.htm


<html>
<body>
Back to <a href="test.htm">Test File</a>
<br/>
Every good boy does fine
</body>
</html>
Table Tags
● Standard
<table> = Define table
<tr> = Define row (inside a table)
<td> = Define cell (inside a row)
● Grouping/Formatting
<th> = Same as <td>, but used to indicate header
<thead> = Header group
<tbody> = Body group
<tfoot> = Footer group
Table Attributes
● border = to indicate border thickness
● cellpadding = padding between cell border and
content
● cellspacing = padding between cell borders
● width = width of table (pixels or percent)
e.g. 120, 50%, 10%
● bgcolor = background color
tr,td Attributes
● align = horizontal alignment of content
● Left, right, center
● valign = vertical alignment of content
● Top, bottom, middle
● bgcolor = background color
● <td> attributes
● width = width in pixels or %
● colspan = # of columns the cell occupies
Sample 10
<html>
<body>
<table border=1>
<tr>
<td>Item</td><td>Amount</td>
</tr>
<tr>
<td>Burger</td><td align=right>20.00</td>
</tr>
<tr>
<td>Drink</td><td align=right>10.00</td>
</tr>
<tr>
<td colspan=2>30.00</td>
</tr>
</table>
</body>
</html>
Sample 11
<html>
<body>
<table border=1>
<tr>
<th>Item</th><th>Amount</th>
</tr>
<tr><td>Burger</td><td align=right>20.00</td></tr>
<tr><td>Drink</td><td align=right>10.00</td></tr>
<tfoot align=right>
<tr>
<td>Total</td><td>30.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
Sample 12
<html>
<body>
<table border=1 cellspacing=0 cellpadding=5>
<tr>
<td>Item</td><td>Amount</td>
</tr>
<tr>
<td>Burger</td><td align=right>20.00</td>
</tr>
<tr>
<td>Drink</td><td align=right>10.00</td>
</tr>
<tr>
<td>Total</td><td>30.00</td>
</tr>
</table>
</body>
</html>
Tables for Layout
● Tables inside a table cell is also valid
● Nested tables
● Tables are very useful for layouting a page
● Imagine the page as a grid
Header

Links Content

Footer
Lists
● Bulletted items
<ul> = Unordered list
<ol> = Ordered list

● List items are tagged by <li>


Sample 13

<html>
<body>
Ordered List
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>
Sample 14

<html>
<body>
Nested List
<ul>
<li>First item</li>
<ol>
<li>First subitem</li>
<li>Second subitem</li>
</ol>
<li>Second item</li>
</ul>
</body>
</html>
Possible Color Values
● Defined names ● Hex Value (#RRGGBB)
● red ● #FF0000
● blue ● #0000FF
● green ● #00FF00
● black ● #000000
● gold ● #FFD700
● Orchid ● #DA70D6
● etc

Drawing tools like GIMP can provide hex values


Sample 15
<html>
<body>
<table border=1 cellspacing=0 cellpadding=5>
<tr>
<td>Item</td><td>Amount</td>
</tr>
<tr>
<td>Burger</td><td bgcolor=red>20.00</td>
</tr>
<tr>
<td>Drink</td><td bgcolor=#FF0000>10.00</td>
</tr>
<tr>
<td>Total</td><td>30.00</td>
</tr>
</table>
</body>
</html>
Head Tag
● Head tag can be added before the body tag
● Contains information about the page
● Links to files
● Style information
● Example:
<html>
<head>
<title>My First Page</title>
</head>
<body>Hello world!</body>
</html>
Head elements
<title> = Title of the page; show in browser title

<base> = Empty element with the ff attibutes:


● href = Base URL of all links with relative path
● target = default target of the links

<style> = defines style information of elements


Sample 16

<html>
<head>
<title>My title</title>
<base target=“_blank“ />
</head>
<body>
Look at the browser's title bar<br/>
<a href=“http://www.upd.edu.ph“>Test Base</a>
</body>
</html>
Style tag
● Encloses style language called Cascading style
sheet (CSS)
● Example
<style type="text/css">
h1 {
color: red;
font-family: arial;
}
</style>
Sample 17
<html>
<head>
<style type="text/css">
h1 {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<h1>Styled header</h1>
Normal text
<h1>Another header, also styled</h1>
</body>
</html>
CSS Syntax
<selector> {
<property> : <value>;
<property> : <value>;
...
}
● Example
h1 {
color: red;
}
Advantage of using CSS
● Centralized formatting
● Ensures all tags of the same type have the same
attributes
● Without it, changing the color means changing
every instance

● Provides additional features/capabilities


● Remove underline in links
● Handle mouse-over styles effects
● Color can be non-hex (e.g., color: rgb(255,0,0); )
CSS Comments
● Comment section by enclosing in /* */
● Useful for testing styles
● Example:
h1 {
color: red;
/* font-family: arial; */
}
Class and ID Selectors
● We can add id and class attributes to html
elements
● Styles are not tied to html tag
● Combination of styles
● Syntax
#<id selector name> { ...}
.<class selector name> { ...}
<html tag>.<class selector name> { ...}
Sample 18
<html>
<head>
<style type="text/css">
#highlight {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<h1>Normal header</h1>
<h1 id=highlight>Styled header</h1>
<p id=highlight>Styled paragraph</p>
</body>
</html>
Sample 19
<html>
<head>
<style type="text/css">
.highlight {
color: red;
font-family: arial;
}
.italicfont { font-style: italic; }
</style>
</head>
<body>
<h1>Normal header</h1>
<h1 class=highlight>Styled header</h1>
<p class=“highlight italicfont“>Multi-styled element</p>
</body>
</html>
Sample 20
<html>
<head>
<style type="text/css">
h1.highlight {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<h1>Normal header</h1>
<h1 class=highlight>Styled header</h1>
<p class=highlight>Not affected</p>
</body>
</html>
div and span tags
<div> = defines a section of an html document

<span> = used to group inline content

● The <div> tag takes as much of the width of the


page as it can. It blocks out the whole section of the
page, so that anything following it has to go to the
next line beneath it.
● The <span> tags takes as little space as possible,
only enough to contain its contents.
<div> Example
<html>
<body>
The quick <div style="border: 1px solid;">
brown</div> fox.
</body>
</html>
<span> Example
<html>
<body>
The quick <span style="border: 1px solid;">
brown</span> fox.
</body>
</html>
Sample 21
<html>
<head>
<style type="text/css">
.highlight {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<h1>Normal <span class=highlight>header</span></h1>
<p>Not affected</p>
<div class=highlight>
<p>Is affected</p>
<p>Is affected</p>
</div>
</body>
</html>
Inline Styles
● Style attribute can be included in an html
element
<p style="color: red;">Inline style</p>

● Used normally used with <div> and <span> tags

● WARNING: This tends to decentralize formats


Sample 22
<html>
<body>
<h1>Normal header</h1>
<p style=“color: red; font-family: arial;“>Inline style</p>
</body>
</html>
External Style Sheets
● CSS files can be "included" using <link> tag in the
header
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle1.css" />
<link rel="stylesheet" type="text/css" href="mystyle2.css" />
</head>
<body>...</body>
</html>
Multiple Style Sheets
● Style sheets properties from different sources
are merged

● Conflicting properties generally follow this


priority
1. Inline (element's style attribute)
2. Internal (HTML head's style element)
3. External (CSS file)
Background-related properties
● background-color
e.g. Background-color: #00FF00;
● background-image
e.g. background-image: url('bg.png');
● background-repeat
possible values: repeat-x,repeat-y, no-repeat
● Shorthand
background: <color> <image> <repeat>;
e.g. background: #FF0000 url('bg.png') repeat-x;
Text-related properties
● color
● text-align
possible values: right, left, center, justify
● text-decoration (can remove underline in links)
possible values: none, overline, underline,line-through
● text-transform
possible values: capitalize, uppercase, lowercase
Font-related properties
● font-family
● font-style
possible values: normal, italic, oblique
● font-size
possible values: none, overline, underline,line-through
● font-weight
possible values: normal, bold, bolder, lighter
Link-related properties
● a:link { /* CSS */ }
● Unvisited link
● a:visited { /* CSS */ }
● Visited link
● a:hover { /* CSS */ }
● Mouse over
● a:active { /* CSS */ }
● Selected link

● Can also be used with id and classes


e.g a#mainmenu:hover { color:yellow; }
a.mainmenu:hover { color:yellow; }
Sample 23
<html>
<head>
<style type="text/css">
a{
color: red;
text-decoration:none;
}
a.mymenu:hover {color:blue;}
</style>
</head>
<body>
<a href=''>Normal</a> and
<a class=mymenu href=''>My Menu</a>
</body>
</html>
More properties
● Presented are selected property/values only

● More properties are available


● Border
● Padding
● Margin
● etc
Inspect Element / View Source
● HTML data are available to the users
● Browsers generally have built-in feature that allows
users to see HTML data of sites

● Right-click, then Inspect element provides CSS


info (among others)
● Safari
● Firebug Plugin for Firefox
● Chrome
● IE 8 or later (under development tools)
● etc
GUI-based HTML Generators
● Applications can save-as HTML
(e.g. Open office, MS Office, etc)
● Dreamweaver
● etc

Try using hand-coded HTML first for practice


References
● www.w3schools.com
● Googling it
● Experimentation

You might also like