Basic HTML/CSS Primer for High School Advisers

40 %
60 %
Information about Basic HTML/CSS Primer for High School Advisers
Design

Published on June 24, 2009

Author: erincubert

Source: slideshare.net

Description

During Emerging Media workshop we talked about the basic html/css terminology and importance before moving into CMS.

HTML Foundation of Web development < <

You don’t have to be a Web ninja to understand Web development basics.

Code is a series of logical questions and answers

So, let’s answer some questions …

Layers of a Web site

Hypertext Markup Language Hypertext Markup Language describes: - Structure - Content - Typographic hierarchy - Rudimentary style (bold, italics, etc.) What is HTML?

HTML Document It might feel chaotic and unstructured … But the entire content of the page exists here.

Cascading Style Sheets - Separates style from content - Easier to change formatting and update an entire Web site - Eliminates page load - Flexible design - Better user accessibility for search bots and screen readers - Allows you to design for multiple browsers and multiple Operating System (Linux, PC or Mac) environments What is CSS?

CSS Document

HTML is used for content and structure HTML houses scripting languages and behaviors CSS separates style from content CSS helps screen readers and users with disabilities read real content HTML vs. CSS Review Speaking of accessibility …

HTML is used for content and structure

HTML houses scripting languages and behaviors

CSS separates style from content

CSS helps screen readers and users with disabilities read real content

A brief intro to accessibility

When building a Web site consider accessibility issues for users , search engines and mobile applications

A user sees:

Search bot/screen reader: Video on Screen Readers and Accessibility

Mobile device:

There are several things you can do to create good experiences for all users:

Write good, descriptive headlines

Write detailed paragraphs

Write precise page titles

Write descriptive image tags

Write descriptive links Don’t say ‘click here!’

Separate content from style

Ready to start writing HTML and CSS ? Who needs fancy schmancy software? We don’t!

Create a folder called ‘ Web ’ on your desktop

In that folder, create a new folder called ‘ style ’

Open a text editor : Text Wrangler, Text Edit or even Word is fine.

Save a new document as ‘index.html’ You just created a homepage. And added content.

 

HTML has open and close brackets, which are called tags: <b> Content goes here </b> Result: Content goes here <i> Content goes here </i> Result: Content goes here For a complete list, go to W3Schools.org <font color=”blue”> Content </font> Result: Content

 

Declare a ‘DOCTYPE’ DOCTYPE tells browsers which set of rules or semantics to use, what types of tags are allowed and how strictly to follow it. XHTML 1.0 Transitional is now one of the most common ‘DOCTYPEs’ to declare. For a complete list, go to W3.org

Create an HTML tag - Defines the document as <html> Make sure to add open and close tag End of the document </html>

- Defines the document as <html>

Make sure to add open and close tag

End of the document </html>

Create an HEAD tag - Defines header information Contains meta data and links to external files (such as CSS)

- Defines header information

Contains meta data and links to external files (such as CSS)

Create an TITLE tag Defines Title of Web page

Create an LINK tag A favicon is the small image that shows up in the browser Examples:

Create META information Add descriptive text for search engines and screen readers to read

Create CSS Link Adding a stylesheet link will allow you to link CSS to HTML

Create a CSS file - Create a new file called styles.css

Link HTML to CSS Make sure that the name of the folder matches up

Add a BODY tag to the HTML page Defines content area of the Web page

Let’s start adding content! Between <body></body> tags, you can start to add other tags, such as paragraphs <p></p> and headlines <h1></h1>

You’ve got a page … But it looks kind of boring, right?

CSS Basics p { color:#666666; } Result: Content becomes grey p { color:#666666;font-weight:900; } Result: Content becomes grey and heavy bold Target HTML tags with ‘selectors’ in CSS. Attribute style information between the brackets.

Change ‘style’ of an HTML element:

Remember this?

Who’s a Web ninja? Questions?

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Learn by doing - Code School

HTML/CSS 11 courses. ... Learn the basics of iOS development and bring your app ... Code School teaches web technologies in the comfort of your browser ...
Read more

CSS Examples - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS ... CSS Examples CSS Examples CSS Quiz ... Basic ...
Read more

HTML Tutorial - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS ... HTML Basic HTML Elements ... tutorial teaches ...
Read more

Target Marketing and Prospecting Methods - The American ...

Target Marketing and Prospecting Methods ... advisors who are targeting high net worth clients such as ... • offering seminars to high school juniors ...
Read more

Some Simple Unsolved Problems - UUMath - Home

Some Simple Unsolved Problems ... Prime Number Problems To ... Fermat's Last Theorem were famous open problems when I went to High School, but ...
Read more

Jamaica: Contact info for Schools in Jamaica - TripAdvisor

Jamaica: Contact info for Schools in ... Below is a list of several BASIC schools throughout the parishes of ... More for high school students.
Read more

Teaching Financial Literacy To Teens: Introduction ...

Advisor Insights; Newsletters ... Tweet Teaching Financial Literacy To Teens: Introduction; ... and only four states require high school students to ...
Read more

Amazon.com: Online Shopping for Electronics, Apparel ...

Hello. Sign in Your Account Sign in Your Account Try Prime Lists Cart. ... TenMarks.com Math Activities for Kids & Schools: Wag.com Everything For Your Pet :
Read more

50 Free Responsive HTML5 Website Templates

... but fairly often they require a high degree of customization. Eventually, ... It’s great if you know the basics of HTML and CSS, ...
Read more