Web Design and Development

theLonelyWolf

0220-20HTML20and20CSS.pptx

Home >Information Systems homework help >Web Design and Development

HTML and CSS

Some content from:

Build Your Own Website The Right Way Using HTML & CSS

(Ian Lloyd)

Principles of Web Design (Joel Sklar)

Learning Outcomes

demonstrate best practices in creating standards-based websites

learn the basics of the HTML and CSS languages and how they work together

appreciate some of the history of HTML and the current HTML 5 standard

Remember…

these notes are not meant to be exhaustive or stand-alone

you should read the chapters in the books and watch the videos online – preferably before the lecture – to pick everything up

… and practise making small pages and sites – so it sticks!

Creating Web Pages with HTML

HTML is a markup language (not a programming language) that lets you specify the structure and content of a Web page

markup elements define each section or item

this <h1> element defines a first-level heading:

Styling Web Pages with CSS

CSS is a style language (also not a programming language) that lets you modify how a Web page appears

the following style rule makes all heading 1 elements blue

h1 { color: blue; }

Separation of Form & Function

Content & Structure = HTML

Style = CSS

Dynamic Functionality = JavaScript, PHP…

these should be used appropriately

don't inextricably link content and style

e.g. make headings headings

top-level headings must be <h1>, content is structured correctly

then change the style to make it look like whatever you want

… i.e. if it's too big, don't make it <h2>… that's incorrect (<h2> is second level headings with small font size)

Separation of Form and Function

Form = what it looks like

Style

CSS

Function = what it is

Structure & Content

HTML

Structure of a Basic Web Page

an HTML file contains content text "marked up" with HTML

CSS code can be in the same file or in a separate file

the code itself does not appear in the browser

the browser interprets the HTML & CSS and displays (renders) the results

each browser interprets HTML & CSS in its own way, based on its rendering engine

it is essential that you test your work in different browsers

different programs and different versions

Structure of a Basic Web Page

<!doctype html>

<html>

<head>

<title> Demonstration Page </title>

</head>

<body>

<h1> Sample Heading </h1>

<p> Simple sample paragraph </p>

</body>

</html>

the document type, or doctype for short, specifies the rules for the document language

the <html> tag is the root element

the two main sections are the <head> and <body> elements

the <head> section is the container for all of the descriptive information about the document (not displayed)

the <body> section includes the content that the user will see in their browser

In the example above, the meta tag tells the browser which character set to use—specifically, UTF-8, which includes the characters needed for web pages in just about any written language.

To be drawn on… note: element opening and closing tags

HTML Code

elements (tags) - the basic building blocks of HTML

attributes – extra information for elements (properties)

most elements have opening and closing tags

some are "void" or "empty": no content or closing tag

(e.g. img, br, hr, meta, input)

Add “value” to this – “en” is a value (of an attribute)

HTML Elements

an HTML element starts and ends with tags – the opening tag and the closing tag.

a tag consists of an opening angled bracket (<), some text, and a closing bracket (>). e.g. <p>

inside a tag, there is a tag name; there may also be one or more attributes with values. e.g. <p class="test">

non-empty elements have content in them,

should have a closing tag. e.g. <p> Content </p>

empty elements can not contain content

should not have a closing tag. e.g. <br>

<p class="test"> This is a test paragraph. <br>With two lines. </p>

HTML Attributes

HTML elements can have a range of attributes, depending on which element you’re dealing with

each attribute is made up of a name and a value

always written as: name="value"

some are optional, some are compulsory –

e.g. the img (image) element requires a source file reference

Learn by Example

since HTML and CSS (and JavaScript but not PHP) are sent to the client, anyone can read the code

great way to learn

but… most Web pages don’t use best-practice techniques, so don't trust that everything you see online is good

Head section <head>

not the same as headings <h1> or headers <header>…

contains information about the page, not information that will be displayed on the page

<title> element – where do you see the title displayed?

avoid "Untitled document" pages

Body section

<body>

where everything to display in the browser 'canvas' goes

all content elements (p, div, img, a, head, table, etc.) must be inside the body element

Some HTML Elements (just a selection)

Element	Description
<h1>, <h6>	Heading – the number defines the level; 1 = most important
<ul>, <ol>	Unordered (bulleted) list, ordered (numbered) list
<li>	List item – must be found inside either ul or ol
<a>	Anchor/link – href attribute specifies URL to link to
<img>	Image – src, height, width, alt attributes
<strong>	Strong importance (usually shown as bold)
<em>	Emphasis to enhance meaning (usually shown as italics)
<div>	Division – logical “block-level” section, used to apply styles to
<span>	Span – logical “inline-level” section of content, used to apply styles to
<header>, <footer>	Header, Footer – logical sections (like div) for the header and footer of a section
<script>	Script – used to embed or reference an executable script, usually JavaScript

https:// developer.mozilla.org/en/docs/Web/HTML/Element

Learn these and more by practice, not memorisation

Brief History of HTML

Tim Berners-Lee proposed HTML at the European Laboratory for Particle Physics (CERN) in 1989

Berners-Lee joined the ideas of the browser, a markup language (HTML), and a communications protocol that allowed hypertext linking

people could read and create documents easily using HTML

HTML is an application of the Standard Generalized Markup Language (SGML), a standard system for specifying document structure

A Need for Standards

things got messy in the "bad old days" (mid 90s) with browser-specific HTML and structural elements being used for display information

using tables for layout and <font> are classic examples

more data-based online applications started being developed (e.g. online banking), which HTML was not suitable for

the World Wide Web Consortium (W3C), founded in 1994 at MIT, sets standards for HTML and other markup languages

jointly developed standards, rather than ones dictated by one vendor, benefit everyone

A Proposal for HTML5

the Web Hypertext Application Technology Working Group (WHATWG) started HTML5 in 2004 (first public draft 2008)

HTML5:

supports standards-based coding

compatible with HTML and XHTML

compatible with CSS

supports new page layout elements like <header>, <nav>

application and media compatible

e.g. video without Flash or other plugins

Working with HTML5

HTML5 attempts to address shortcomings of HTML

addresses needs of modern Web design

offers new features:

logical layout elements

rich media

support for applications (e.g. browser-based data storage)

removes old features:

all display elements removed in favour of CSS

framesets are gone

Working with HTML5

HTML5 offers two syntax options:

loose - HTML-compatible syntax

more relaxed syntax

code shortcuts allowed

e.g. <p class=test>One<p>Two<br>…

strict - XML-compatible syntax

consistent with XHTML

uses XML syntax rules

e.g. <p class="test">One</p><p>Two<br /></p>…

Creating Syntactically Correct Code

(Below are required for any syntax)

documents must be well-formed

all tags must nest properly and not overlap

(Below are only required for strict syntax)

use all lowercase for element names

always use closing tags

empty elements are marked with a closing slash

attribute values must be contained in quotation marks

Working with HTML5

we don't require a particular syntax in this subject.

if it validates with W3C validation tools (validator.w3.org), that’s fine

“Better” code makes pages work better.

you should prefer the sort of code that tools like PHPStorm, Brackets and Dreamweaver make, which is closer to strict

e.g. always close non-empty elements like <p>

but don’t use closing slashes for empty elements like <br>

do quote attribute values like <img src="image.png"…

Choosing the Correct doctype

always use a doctype statement

using a doctype forces the browser to display in standards mode

standards mode = browsers try to give documents the specification-wise correct treatment

quirks mode = browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s

the standard doctype statement for HTML5:

<!doctype html>

https://hsivonen.fi/doctype/

New Elements in HTML5

HTML5 has a number of new elements

not all elements are supported by current browsers (most are)

see www.caniuse.com

test new elements carefully

many elements have been removed in HTML

mostly those involving presentation effects … why?

framesets are no longer available

Attributes in HTML5

elements can contain attributes that set properties

global attributes can be applied to any element

including class, id, style (all for CSS), lang, title, accesskey

earlier versions of HTML had more attributes

HTML5 has fewer attributes because of CSS

e.g. align and border attributes for div elements

http://www.w3.org/TR/html5/ obsolete.html

Using HTML5 Elements for Page Structure

most Web pages contain some common sections:

header

navigation

articles

figures

footers

sidebars

these are commonly marked up with <div> elements and appropriate id or class names

e.g. <div id="header”> … </div>

Using HTML5 Elements for Page Structure

The HTML5 elements for page layout include:

<header> contains the page header content

<nav> contains the navigation elements for the page

<article> contains the primary page content

<section> defines sections or groupings of page content

<aside> contains additional content such as a quote or sidebar

<figure> contains images for the article content

<footer> contains page footer content

Interactive Capabilities in HTML5

audio and video

new <video> element, video player built in to browser

this means you don't need plugins like Flash Player

drawing <canvas>

you can use JavaScript to create animations in the canvas

background application processing

local data storage

Using Good Coding Practices

create code that ensures the greatest standards-compliance, presentation, compatibility and usefulness of your content

stick to the standards

use semantic markup

validate your code

Stick to the Standards

stick to the W3C standards

separate content from presentation

plan for your sites to be accessible to different devices

standardised coding and design is more accessible

Use Semantic Markup

semantic markup identifies the intended use of document sections (what it is)

accurately describes each piece of content

until recently, this logical (correct) use of HTML elements was often ignored

document elements must match the meaning and usage of the document sections:

<p> for paragraph, <h1> for first-level heading, and so on

<h2> isn't just a smaller heading, it's a second-level heading (imagine book chapters, sections, sub-sections…)

What is Semantic Markup?

Semantic markup is a fancy way of saying you can use HTML tags to tell search engines exactly what a specific piece of content is.

Validate Your Code

valid code conforms to the usage rules of the W3C

valid code enhances browser compatibility, accessibility, and exchange of data

the most common mistakes include:

no doctype declaration

missing closing tags

missing required attributes like alt in <img> elements

incorrect tag nesting

unquoted attributes

http://validator.w3.org/docs/why.html

Exam Questions

What are the (loose) syntax errors in the following code?

<p>I am <em>very <strong>happy</em></strong> now</p>

My favourites: <li>James</li> and <li>Paul</li>

<h1>Most important</h1><h4>Not so important<p>Normal

Answer:

https://validator.w3.org/check?uri=http%3A%2F%2Fditwebtsv.jcu.edu.au%2F%7Esci-lmw1%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS

Cascading Style Sheets

Adding Style with CSS

web designers use Cascading Style Sheets (CSS) to add presentation information to Web pages

CSS lets you control the presentation characteristics of an entire website (multiple pages) with a single style sheet

can also have multiple sheets for different devices

presentation properties are separate from the content

The Development of CSS

CSS was developed to standardise display information

HTML = what it is

CSS = what it looks like

CSS was slow to be supported by browsers

newer browsers offer more complete support

latest release is CSS3

CSS Style Rules

style rules express the style characteristics for an HTML element

it's important to note that style rules apply to HTML elements

if you want to apply them to something else, you need to make that into an element (e.g. with div or span)

a set of style rules is called a style sheet

usually a separate file with .css extension

CSS Style Rules

rules are composed of: a selector and a declaration

the selector specifies the element to which the rule is applied

the declaration specifies the exact property and values

Combining CSS Style Rules with HTML

You can combine CSS with HTML in three ways:

inline style - applies only to this element

internal style sheet - applies to whole page

external style sheet - applies to multiple pages

"multiple pages" = wherever it's specified

Using External Style Sheets

external style sheets let you specify rules for multiple pages

these are just text documents with .css extension that contain style rules

this is the preferred method in most cases

<head>

...

</head>

will allow you to create the style sheet only once and call upon it from any HTML page

h1 {color: red;}

Body {background-colour:black; colour: purple}

In the styles.css file (external)

in this CSS file you must write exactly what you would have written inside the STYLE tags - do not attempt to re-write STYLE tags inside the new document because the style was already identified in the LINK tag.

Using Internal Style Sheets

contained within the <style> element, which is contained within the <head> section

only affect the document in which they reside

<head>

...

h1 {color: red;}

</style>

</head>

this useful if you want to override the default for a particular element

Using Inline Styles

you can define styles for a single element with the style attribute

the style HTML attribute can be used to override a style that was set at a higher level

the style attribute is useful for testing styles during development, or to specify a property that will only ever apply in one situation (unlikely)

Understanding The Cascade

”cascading" means that multiple style sheets and style rules can apply to the same document/element

only one rule can apply to an element for a given property

any number of rules can apply for different properties

the CSS cascading mechanism determines which rules apply based on three variables:

specificity of the selector

order of the rule in the style sheet

use of the important keyword

Using Inheritance to Simplify Styles

elements in an HTML document are structured in a hierarchy

parent elements contain child elements

e.g. <li> will be a child of <ul> or <ol>

elements can be both parent and child elements

the CSS properties inherit from parent to child

e.g. if you make the <ul> blue, the <li> in it will also be blue

you can style multiple document elements with just a few style rules using inheritance

watch video- https://www.youtube.com/watch?v=aOScN7hzzBQ

Using Inheritance to Simplify Styles

Individual style rules:

h1 {color: red;}

p {color: red;}

ul {color: red;}

em {color: red;}

li {color: red;}

Or using inheritance:

body {color: red;}

body is the most useful/common element (selector) to set your default page styles like background colour and font – inherited by everything else

CSS Selectors

CSS Attribute Selectors - https :// www.youtube.com/watch?v=aMAkpJSq3rk

CSS Combinator Selectors - https:// www.youtube.com/watch?v=L6Y9Yltj15A

CSS Standard Selectors - https:// www.youtube.com/watch?v=7odP4_5wO3c

Excellent Videos to watch:

Using Type Selectors

the selector determines the element to which a style declaration is applied

type selectors are the simplest form of selector

they select every instance of that element in the document

in the following example, all h1 elements will be red

h1 {color: red;}

Grouping Selectors

you can group selectors to which the same rules apply

specific style rules:

h1 {color: red;}

h2 {color: red;}

grouping selectors (note the comma):

h1, h2 {color: red;}

Combining Declarations

you can state multiple property declarations for the same selector

individual style rules:

p {color: blue;}

p {font-size: 125%;}

combining declarations:

p {color: blue; font-size: 125%;}

there is no real standard for CSS formatting (e.g. indenting)- using what Dreamweaver makes is a good idea.

Using Descendant Selectors

you can select elements that are descendents of other elements

selecting only <em> elements that are contained somewhere within <p> elements (note the space):

p em {color: blue;}

<p>Default <em>this selected</em></p>

<em>this not selected</em>

<p><div><em>is selected</em></div></p>

In the last line, the <em> is a descendant ("grandchild") of the <p>, but not a child. It is selected by the descendant selector.

CSS Selectors

Using Child Selectors - Combinator

You can select elements that are direct children of other elements

Selecting only <em> elements that are contained directly within <p> elements (note the >):

p > em {color: blue;}

<p>Default <em>this selected</em></p>

<em>this not selected</em>

<p><div><em>this not selected</em></div></p>

In the last line, the <em> is a descendant ("grandchild") of the <p>, but not a child. It is not selected by the child selector.

child element of p

Using Adjacent Sibling Selector - Combinator

p element direct adjacent sibling of h3 ( comes after it)

Using General Sibling - Combinator

all p elements after h3 will be targeted

Using the Universal Selector

Universal selector lets you select groups of elements

Selecting all children of any div elements:

div * {color: blue;}

<div>...<em>this selected</em></div>

<div>this not selected</div>

What would * div select?

* div would select divs that are descendants of anything… which should be all of them, since they would all be inside body at least.

Using the Class Selector

CSS style rule:

.intro {font-size: 125%;}

used in HTML:

<p class="intro">This is the first paragraph of the document.</p>

Using the Class Selector

the class selector lets you write rules and give them a name

use logical names like warning, not style-based names like redText (which might become less meaningful if styles change)

you can apply that name to any element you choose using the HTML class attribute

the dot (.) flag character indicates the selector is a class selector

e.g.

.warning { color: red }

applied using:

<p class="warning">… or <h1 class="warning">…

Using the id Attribute Selector

CSS style rule:

#copyright { color: white; }

used in HTML:

<p id="copyright">copyright info</p>

Using the id Attribute Selector

id is just like class, except:

id refers to a unique (only one) instance of the id attribute value within a document

multiple instances of the same id is invalid

id uses a hash (#) flag character instead of period (.)

the id attribute should be used to identify parts of the page that only occur once, e.g. logo, copyright…

class is used for repeatable sections/styles, e.g. pullquote, highlight, errormessage…

# is not a "hash tag" in this context

Using the <div> and <span> Elements

the <div> (division) and <span> (span) elements are designed to be used with CSS - <div> tag is block level tag and <span> tag is a inline tag

they let you specify logical sections within a document that have their own name and style properties

div is used to divide up a web page – to provide a definite structure that can be combined with CSS to great effect

it adds a break before and after the contained text

it is a block-level element

Working with <div> elements

use <div> with the class or id attributes to create logical, block divisions on a Web page

CSS style rule:

#column {

width: 200px;

height: auto;

padding: 15px;

border: thin solid;

}

Used in HTML:

<div id="column">This division is styled</div>

Could also use:

div#column as the selector

(What's the difference?)

Working with <span> Elements

the span element lets you specify inline elements that have their own name and style properties

in-line elements reside within a line (of text)

div = block - adds line break before and after

span = inline - no breaks, can't contain block elements

<span style="display:block"> is identical to div :)

Working with Span Elements

CSS style rule:

color: white;

background-color: black;

}

used in HTML:

<p>A <span class="inverse">Wonderful</span>site.</p>

Could also use:

span.inverse as the selector

Would only apply to spans with the inverse class

Soooo much more…

make sure you're reading and watching the book and video resources

take notes

and… practise!

1. Exam-style Question (Precedence)

What colour will the text "here" be?

body {color: blue;}

.one {color: green;}

p {color: red;}

2. Exam-style Question (Precedence)

What colour will the text "here" be?

body {color: blue;}

.one {color: green;}

p {color: red;}

Summary

use best practices in creating standards-based websites

HTML and CSS are the core languages used to make websites

HTML is used for content and structure markup (function)

CSS is used for presentation (form)

follow the standards in how you use these