This document provides an overview of HTML basics for an ARTDM 171 class. It discusses setting up local folders for HTML work, common HTML tags like <html>, <head>, <title>, <body>, and <p>, semantic tags, linking with <a> tags, adding images with <img>, lists with <ul> and <ol>, tables with <table>, <tr>, and <td> tags, and introducing CSS for styling. It provides examples of basic page structure and tags. Homework is to refine last week's work with additional CSS styling rules.
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
Predictive analytics built on massive amounts of data, complex scientific modeling, and tens of thousands of simulations doesn’t add up to much to a farmer, if you haven’t gained their trust. Gaining trust is an important goal for any display of information, especially when your customer expects it to inform critical decisions with lasting effects, i.e. bet the farm. Getting to know your customer intimately and designing the appropriate user experience is essential. In this presentation I will share our experience at The Climate Corporation designing data visualizations and displays of predictive models for this unique group of customers and walk through a process your company can use to do the same.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
In this class we go deeper into the corking of CSS and look and the novelties in HTML 5, more specifically concerning the integration of media files, creation of forms, and optimisation for responsive design
5. Working folders for this week
• Create a new folder in your ARTDM171 folder
called Week4
• Create a new folder in Week4 called html
• Set the html folder as your local root folder
• Example:
ARTDM171
Week4
html
6. Tags used for Page
Properties
• <!DOCTYPE > - Defines the document type
• <html></html> - Starts and ends the
document
• <head></head> - HTML Header. Comes after
the <html> tag and before the <body> tag
• <title></title> - HTML Title, the name of the
document
• <body></body> - Contains your visible
content
7. Anatomy of a Web Page
<html>
<head>
</head>
<body>
</body>
</html>
8. Nesting
• Be sure to properly nest your tags
• Right: href=”xyz.html”>Xyz</a></em>
<em><a
• Wrong:href=”xyz.html”>Xyz</em></a>
<em><a
9. <meta /> – Meta Tags
• <meta /> - Meta tags appear between the <head> tags.
Used for page description, keywords, and other data.
• Examples:
‣ <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
‣ <meta name="keywords" content="design, technology,
Web" />
‣ <meta name="description" content="This site is about
bread." />
‣ <meta name="robots" content="noindex, nofollow" />
• Using the robots meta tag: Google Webmaster Central
Blog
10. Basic Tags
• <p></p> Paragraph
• <br /> Line break
‣ An empty tag, always end with a
forward slash
• <em></em> Emphasis
• <strong></strong> Stronger emphasis
• <h1></h1> <h2></h2> <h3></h3>
Headers
11. Semantic Web
• <em></em> and <strong></strong> are
known as Idiomatic Elements
‣ They help to convey meaning, which can
be interpreted by a browser or device as
a visual style, motion, sound volume, etc
• <i></i> and <b></b> are Typographic
Elements
‣ Add visual style to a page, but do not
convey meaning
12. Semantic Web
• <p></p> add structure to content
which helps convey meaning and
thought progression
• <br /> could be used everywhere, but
then meaning gets lost
13. Semantic Web
Heading tags help add structure to
the page and tell search engines
whatʼs important
<h1>Name of the Site</h1>
<h2>Title of the Page</h2>
<h3>Section on the Page</h3>
<h4>Subsection</h4>
14. Semantic Web
The Semantic Web by Tim Berners-
Lee, James Hendler, and Ora Lassila
“A new form of Web content that is
meaningful to computers...”
16. <a></a> - Anchor
• Link to an external Web site:
‣ <a href="http://www.dvc.edu">DVC</a>
• Link to a Web page on your own site:
‣ <a href="bread.html">My Page About Bread</a>
‣ <a href="about/history.html">History of Bread</a>
• Hooks (invisible):
‣ <a name="croissants"></a>
• Link to the hook:
‣ <a href="index.html#croissants">Croissants</a>
17. <img /> - Image
• <img src="images/file.jpg"
border="0" height="10" width="10" />
• Border, Width and Height are
optional.
20. <table> – Table tags
<table></table> – Table. Encloses your table.
You can set the width (Pixels or Percentage
%), border, and cellpadding and cellspacing
as attributes.
<tr></tr> – Row. Encloses a row in your table.
<td></td> – Cell. Encloses what's in each cell of
the table. These also create your columns.
Make sure you have the same number of cells
in each row.
23. Fonts
• For fonts, colors, and sizes, use CSS.
• Placed between the <head></head> tags
• <style type="text/css></style> - Style
tags. Enclose your CSS code in these.
• Page Elements
‣ CSS uses page elements to specify
fonts. You can set a font on any page
element, body, h1, p, a,...
24. What about the <font> tag?
• <font> tag is dead!
• No longer the standard in todayʼs
World Wide Web
• <font> tags embed presentation in
the structure
• With CSS, our goal will be to
separate presentation from structure
26. Homework due Feb 23
• Read and follow along Chapter 7: Styling Page
Content
‣ Use last weekʼs homework and add CSS
‣ Add at least 9 rules
3 style rules for tags
2 custom classes
2 compound styles
2 divs with styles applied to the idʼs
• There will be a quiz on Chapter 7 next week!
• Next week we'll go deep into CSS
Dreamweaver automatically generates most of this when you create a new document. 10 lines of code (including a blank line between head and body.)
&#xA0;
Take a look at these tags in Dreamweaver in a basic HTML document.
(Notice the attributes.)
Class Exercise:&#x2192;&#xA0;&#xA0; Add a page heading, paragraph, bold, italics, link, and an image. Use the image saved in the ARTDM-171 folder. (Drag and drop it into the images folder on your USB drive.)