Web Design Workshop

Web Design
www.maissuci.com
What is a Website?
Web pages served from a unique domain
Accessible via a network
www.maissuci.com
How does a website work?
www.maissuci.com
What is a Webpage?
Document written in plain text interspersed
with formatting instructions of HTML
Content is structurized
www.maissuci.com
What is HTML?
Hyper Text Markup Language
Code for web pages
HTML5 is the latest standard
Standardized in October 2014
HTML4 was standardized in 1997
Markup Tags
<p>
<b>
<video>
www.maissuci.com
Style of HTML
<html>
<head>
<title> document title </title>
</head>
<body>
...your page content
</body>
</html>
www.maissuci.com
Elements of HTML
Tags are the elements that create the
components of a page
Tags surrounded by angle brackets < >
Usually come in pairs
Example: Start tag <p> and end tag </p>
Stuff between is called element content
Tags are not case sensitive
New standard is to use lower case
www.maissuci.com
Tag Example
<p> Hi, thank you for coming!</p>
www.maissuci.com
Components
<!DOCTYPE html>
First line of code
Declaration of version of HTML
<html></html>
Container for the document
Everything on the webpage is here
<head></head>
<title> Title of page </title>
<body></body>
Content of page
www.maissuci.com
HTML Title
www.maissuci.com
10
Basic Tags
Headings
<h1></h1>
to <h6></h6>
Title of section
Paragraph
<p> </p>
Inserts a line space before and after a
paragraph
www.maissuci.com
11
Basic Tags
<h1>My New Heading</h1>
<p>This is my new Paragraph. Creating
web pages is exciting and fun. This is
awesome!</p>
www.maissuci.com
12
Basic Tags
My New Heading
This is my new Paragraph. Creating web pages is
exciting and fun. This is awesome!
My New Heading
This is my new Paragraph. Creating web pages is
exciting and fun. This is awesome!
www.maissuci.com
13
Basic Tags
www.maissuci.com
14
Anchor Tag (Link)

Anchor tag <a href=URL>...</a>
<a href="http://www.ics.uci.edu/ugrad">Bren
School of ICS Student Affairs Office</a>
Bren School of ICS Student Affairs Office
www.maissuci.com
15
Anchor Tag (Link)

<p>The sample program is provided by the <a
href="http://www.ics.uci.edu/ugrad">Bren
School of ICS Student Affairs Office</a>, and,
solely lists the minimum requirements.</p>
www.maissuci.com
16
Image Tag
<img>
There is no </img> closing tag, just > or />
<img src=URL alt=description of image />
Source URL points to link of image
www.maissuci.com
17
Image Tag
<img src= http://www.maissuci.
com/uploads/5/6/8/7/5687564/1399435337
.png alt= MAISS Logo/>
www.maissuci.com
18
<div> Tag
<div></div>
Division or section of document
Use to group elements to apply formatting or style
www.maissuci.com
19
<div> Tag
<div>
<h1> Title of section</h1>
<p> bla bla bla bla </p>
</div>
<div class= center>
<p> This is paragraph text</h1>
<a href= http://www.maissuci.com/>This is a link</a>
</div>
www.maissuci.com
20
<span> Tag
<span></span>
Inline container for phrasing content
Use to group elements for styling purposes
<p>This is <span>simple</span> text.</p>
This is simple text.
<p>This is <span style= color: red>red</span> text.</p>
This is red text.
www.maissuci.com
21
Block Elements
A block-level element occupies the entire space
of its parent element (container).
Examples: <div>,<h1>, <p>
This paragraph is a block-level element; its
background has been colored to display
the container element.
www.maissuci.com
22
Inline Elements
An inline element occupies only the space
bounded by tags that define inline elements.
Examples: <span>,<a>, <img>
This span is an inline element; its background
has been colored to display both the beginning
and end of the inline element's influence
www.maissuci.com
23
Block vs. Inline
www.maissuci.com
24
Block vs. Inline
www.maissuci.com
25
Block vs. Inline
www.maissuci.com
26
Full Example
<!DOCTYPE html>
<html>
</html>
www.maissuci.com
27
Full Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
www.maissuci.com
28
Full Example
<!DOCTYPE html>
<html>
<head>
<title>MAISS Website</title>
</head>
<body>
</body>
</html>
www.maissuci.com
29
Full Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
</nav>
</body>
</html>
www.maissuci.com
30
Full Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href="index.html>Home</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact</a>
</nav>
</body>
</html>
www.maissuci.com
31
Full Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
</nav>
<div>
</div>
</body>
</html>
www.maissuci.com
32
Full Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
</nav>
<div>
<p>Hello my name is Julio and I am writing about myself. </p>
<img src="me.jpg" alt=a picture of me/>
</div>
</body>
</html>
www.maissuci.com
33
Result
www.maissuci.com
34
Common HTML Tags

Tag < >
Purpose
h1 - h6
Headings
Paragraphs
Anchors
img
Images
ul, ol, li
Lists (order, unordered)
table, th, tr, td
Tables
div
Grouping, formatting, and styling

www.maissuci.com
35
More tags
www.maissuci.com
36
New in HTML5
www.maissuci.com
37
CSS
Cascading Style Sheets
Standard method of applying
style and appearance to
content
Cascading means that
properties cascade down
through all child elements of a
given element
www.maissuci.com
38
www.maissuci.com
39
Syntax for Style Sheets
p { font-size: 24px; }
www.maissuci.com
40
Syntax for Inline Style (HTML)
<p style= font-size: 16px;>Hi!</p>

same as
p { font-size: 16px; }
www.maissuci.com
41
Anatomy
www.maissuci.com
42
Anatomy
www.maissuci.com
43
CSS Selectors
ID selector
Class selector
#selector_name{ font-size:
16px; }
<div id=selector_name>
Use for selecting a unique
specific element
Each element can have only
one ID
Each page can have only one
element with that ID
.class_name{ font-size: 16px; }

<div class=selector_name>
You can use the same class on
multiple elements.
You can use multiple classes
on the same element.
Element selector
div { font-size: 16px; }
affects all selected elements
directly
www.maissuci.com
44
Where is the CSS code?

1.
2.
3.
4.
Browser default
External style sheet
Internal style Sheet
Inline style
If two rules are the same in any of the above, the

latter wins.
www.maissuci.com
45
Where is the CSS code?
www.maissuci.com
46
Priority
CSS Source Type
Description
Importance
The !important annotation overwrites the previous priority

types
Inline
A style applied to an HTML element via HTML style

attribute
Media Type
A property definition applies to all media types, unless a

media specific CSS defined
User Define
Most browsers have the accessibility feature: a user defined

CSS
Selector Specificity
A specific contextual selector (#heading p) overwrites

generic definition
Rule Order
Last rule declaration has a higher priority
Parent Inheritance
If a property is not specified, it is inherited from a parent

element
CSS property
CSS rule or CSS inline style overwrites a default browser

value
Browser default
The lowest priority: browser default value is determined by

W3C initial value
www.maissuci.com
47
Resources
jsbin.com
HTML, CSS and JavaScript
generator/experimentation
codeacademy
Free online tutorials
w3schools
Has full documentation of HTML and CSS
www.maissuci.com
48
Articles
Simple and Free CSS Templates
10 HTML Tag Crimes You Shouldnt Do
Fixed vs. Fluid vs. Elastic Layouts
www.maissuci.com
49

Web Design Workshop

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Design Workshop

Transféré par

Droits d'auteur :

Formats disponibles

Web Design

How does a website work?

<p> Hi, thank you for coming!</p>

Anchor Tag (Link)

Anchor Tag (Link)

Block vs. Inline

Block vs. Inline

Block vs. Inline

Common HTML Tags

Lists (order, unordered)

table, th, tr, td

Grouping, formatting, and styling

Syntax for Style Sheets

Syntax for Inline Style (HTML)

<p style= font-size: 16px;>Hi!</p>

.class_name{ font-size: 16px; }

Where is the CSS code?

If two rules are the same in any of the above, the

Where is the CSS code?

CSS Source Type

The !important annotation overwrites the previous priority

A style applied to an HTML element via HTML style

A property definition applies to all media types, unless a

Most browsers have the accessibility feature: a user defined

A specific contextual selector (#heading p) overwrites

Last rule declaration has a higher priority

If a property is not specified, it is inherited from a parent

CSS rule or CSS inline style overwrites a default browser

The lowest priority: browser default value is determined by

Vous aimerez peut-être aussi