Scribd
Upload
663 views

Web Design Workshop

The document provides an overview of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) for web design. It defines key concepts like websites, webpages, and how they work. It describes common HTML tags for text formatting, links, images and lists. It also covers CSS for applying styles to HTML elements and the anatomy of CSS code. The document is a guide for learning basic web design using HTML and CSS.

Uploaded by

api-277800531
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
663 views

Web Design Workshop

The document provides an overview of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) for web design. It defines key concepts like websites, webpages, and how they work. It describes common HTML tags for text formatting, links, images and lists. It also covers CSS for applying styles to HTML elements and the anatomy of CSS code. The document is a guide for learning basic web design using HTML and CSS.

Uploaded by

api-277800531
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

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>
<title>MAISS Website</title>
</head>
<body>
<nav>

</nav>

</body>
</html>

www.maissuci.com

30

Full Example
<!DOCTYPE html>
<html>
<head>
<title>MAISS Website</title>
</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>
<title>MAISS Website</title>
</head>
<body>
<nav>
<a href="index.html>Home</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact</a>
</nav>
<div>

</div>
</body>
</html>

www.maissuci.com

32

Full Example
<!DOCTYPE html>
<html>
<head>
<title>MAISS Website</title>
</head>
<body>
<nav>
<a href="index.html>Home</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact</a>
</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

You might also like