Lec02 HTML Css PDF

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/>
<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>
</tr>
<tr>
<td>Burger</td><td align=right>20.00</td>
</tr>
<tr>
<td>Drink</td><td align=right>10.00</td>
</tr>
<tr>
</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>
</ul>
</body>
</html>
Sample 14
<html>
<body>
Nested List
<ul>
<li>First item</li>
<ol>
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</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>
</tr>
<tr>
<td>Burger</td><td bgcolor=red>20.00</td>
</tr>
<tr>
<td>Drink</td><td bgcolor=#FF0000>10.00</td>
</tr>
<tr>
</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>
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>
#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>
.highlight {
color: red;
font-family: arial;
}
.italicfont { font-style: italic; }
</style>
</head>
<body>
<h1 class=highlight>Styled header</h1>
<p class=“highlight italicfont“>Multi-styled element</p>
</body>
</html>
Sample 20
<html>
<head>
h1.highlight {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<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>
.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>
<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>
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

Lec02 HTML Css PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Lec02 HTML Css PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

EEE 13

● General types of user interface for computers

● Generally used to present data transmitted over

● Most common standard is HTML

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

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

● Try playing with body attributes

● Some people recommend adding a "/" to empty

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

● Write this in new.htm

● List items are tagged by <li>

Drawing tools like GIMP can provide hex values

<base> = Empty element with the ff attibutes:

<style> = defines style information of elements

● Provides additional features/capabilities

<span> = used to group inline content

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

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

● WARNING: This tends to decentralize formats

● Conflicting properties generally follow this

● Can also be used with id and classes

● More properties are available

● Right-click, then Inspect element provides CSS

Try using hand-coded HTML first for practice

Anda mungkin juga menyukai