Movatterモバイル変換

PPTX, PDF3,763 views

(Fast) Introduction to HTML & CSS

HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.

Technology◦

Downloaded 102 times

1 / 23

2 / 23

(Fast) Introduction to HTML & CSS

1.
(Fast) Introduction toHTML & CSSDave Kelly ( @davkell )for @091Labs
2.
What are HTML& CSS?HTML structures documents on the webTells browser what content is (not what it means)CSS = presentation (how things look)JavaScript adds interaction / behavioursPeanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/Why separate?http://www.ambientage.com/blog/091labs : 1
3.
Standards.... define themark-up you use tell the browser what to do with itHTML 4.01 (Don’t use)xHTML1.0Frameset (nope)Transitional (nope)Strict*HTML5 (New. Not fully supported / implemented. It’s the future.)All those defined standards....do all browsers work the same?
4.
ToolsFirefox (wide supportfor standards)Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev.Web Developer Toolbar (Firefox add-on)ValidatorsHTML: http://validator.w3.orgCSS: http://jigsaw.w3.orgDevelopment environmentNetbeans / Aptana for me.... Your choice (not WYSIWYG!!)(My) Development processFirefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)Browsershots.orghttp://www.ambientage.com/blog/091labs : 2
5.
HTMLMade up of“tags” (elements)<h1>I’m an important heading</h1> (Heading level 1) <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag)Elements can contain plain text, other elements, or bothNo state / no logic (Mark-up content only, not programming)xHTML Strict elements...must be properly nestedmust be closedmust be lower caseattributes must have a value
6.
HTML TagsTags areusually paired (e.g..., <h1> and </h1>) Some elements are “self-closing” e.g. <br /> <img … />Some elements may include attributes, (additional information that is included inside the start tag).Every HTML document contains standard tags. Each document consists of a head and body The head contains the title (and more…), and The body contains the actual text that is made up of paragraphs, lists, images, and other elements
7.
Simple HTML Examplehttp://www.ambientage.com/blog/091labs: 3
8.
Some HTML tagexamplesHeadings
9.
<h1></h1>, <h2> </h2> …… <h6> </h6>
10.
Paragraph: <p>Some text</p>
11.
Lists
12.
Ordered List<ol> <li>I’m a list item</li></ol>
13.
Unordered list<ul> <li>I’m a list item</li> </ul>
14.
Document Section <div></div> (Important for page layouts!)
15.
Image <img src=“../images/mypic.jpg”alt=“My Picture” title=“It’s me!” />
16.
Links <a href=“http://www.google.com”>Google</a>
17.
Table <table><tr><td>tablecell</td></tr> <tr><td>second row cell</td></tr> </table>http://www.ambientage.com/blog/091labs : 4 & 5
18.
Some HTML attributeexamplesHTML tags can have attributes => give some more info about the tag
19.
Most can have:<h1id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
20.
HTML FormsForms areused to accept information from the Web page userForms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons.To create a form, the <form></form> element is used.Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php” method=“post”>action = “where’s the data going?”method = “how’s it getting there? (post vs get)”
21.
HTML Forms
22.
HTML Forms
23.
CSS (Cascading StyleSheets)Handles presentation of web page
24.
It allows documentauthors to specify the look of a web page (e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)
25.
There are 3ways document styles can be defined: 1. Inline (No!)2. Internal (ehhhm….no)External (Yes!)Concept of the “Cascade”
26.
If a duplicatestyle is declared, it “cascades” through various layers, each overriding the previous…The CascadeThe LayersUser agent settings (default browser styles - user is usually able to modify some of these)Any External (Linked) style sheets (.css file)Any Internal styles (in head section inside <style> tags)Inline Styles (in the style attribute of an element)Each level of style overrides the previous level where duplicate properties are definedCreating Style RulesThere are 2 pieces to each rule:
27.
The Selector ~tells the rule what elements it should apply to
28.
The Rule ~does the formatting of the element
29.
Made up ofa property:value pair
30.
The formatting ofrules:Selector { property1: value1;property2: value2; propertyN: valueN;}http://www.ambientage.com/blog/091labs : 6
31.
Selectors: Match byElementEasiest selector method is to use an element name, e.g.
32.
p { color:#000000; }
33.
Doing this causesall the tags of that name (i.e.<p>) to be formatted according to the style rule declared.
34.
Possible to dothis for multiple elements
35.
h1, h2, h5,p { colour: #ff0000;}Selectors: Match by ClassUsed to display elements of the same type in different ways, e.g.
36.
If the pageyou’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background
37.
Classes are definedusing a dot (.) and a given name, e.g.
38.
.lightText { color:#ffffff }
39.
To use theclass in the document:
40.
<p class=“lightText”>This iswhite text</p>Selectors: Match by IdentifierUsed to display a specific element in a different way, e.g.
41.
If you needan element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)
42.
Identifiers are definedusing a hash (#) and a given name, e.g.
43.
#siteTitle{ font-family: ‘TimesNew Roman’, serif}
44.
To use theclass in the document:
45.
<h1 id=“siteTitle”>My SiteName</h1>Inline Style Rules…only apply to the current element…Overrides other styles if duplicates declared (because of the cascade)Maintenance nightmare
46.
Internal Style Rules…onlyapply to the current page…still slightly nightmarish to maintain
47.
External Style Sheets(.css)These allow you to…
48.
customise & alterthe look of multiple web pages
49.
ensure continuity ofdesign throughout the website
50.
To link anexternal style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.http://www.ambientage.com/blog/091labs : 7
51.
Link StylesPseudo-classes areidentifiers understood by the browser to apply to a subset of elements, without the element needing to be explicitly tagged with the styleQuestions?Get in touch… dkelly@ambientage.com
52.
@davkell
53.
linkedin.com/in/davkell
54.
www.ambientage.com
55.
www.davidkelly.ie
56.
Slides & Footnotes
57.
www.ambientage.com/blog/091labs/

[8]ページ先頭

Movatterモバイル変換

Change Language

(Fast) Introduction to HTML & CSS

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to (Fast) Introduction to HTML & CSS

Recently uploaded

(Fast) Introduction to HTML & CSS