Web1O1 - Intro to HTML/CSS

MeetupWeb 1O1 – Intro to HTML/CSS katarinamilkova t: twitter.com/katmilk e: katarina.milkova@gmail.com

What is the Web? It’s magic! Network of a collection of interlinked hypertext documents accessed via internet Consists of web servers, IP (internet protocol), DNS (domain name service) and pixie dust

Web Consists of many languages HTML, CSS, JS, PHP, etc. Every language has it’s own syntax and semantics Syntax: the study of grammar (how you say something) Semantics: the study of meaning (meaning behind what you say)

Web Layers HTML = Content Layer This is the structure and raw content of the page CSS = Presentation Layer This layer add styles to the structure and content of your webpage JS = Behavior Layer This layer dictates how an item behaves when clicked on, hovered over, or sometimes further styled to achieve a certain look/behavior It dictates how things act and react to user interaction

What is HTML? HyperTextMarkup Language It is a simple data language that consists of tags used to display content of a webpage It defines the structure and semantics of your web document It is referred to as the content layer in the web cake analogy Most commonly used today is the more structured way of writing HTML: xHTML Extensible HyperTextMarkup Language

What is HTML? It is NOT a programming language It is a markup language A markup language is a set of markup tags Uses markup tags to describe web pages (source: http://www.w3schools.com/html/html_intro.asp)

How does it work? Very simple and logical format Much like a word document Read from top to bottom, left to right. Written with text in a plain text editor Consists of tags used to set certain sections apart (bigger text, bolder text, etc) Different tags call different functions and do different things to the HTML text. For a list of tags for HTML 4.0 and xHTML 1.0 visit: http://www.w3schools.com/tags/default.asp

What is a tag? A tag is the basis for HTML It’s a command enclosed with less-than and greater-than sign <html>, <head>, <body>, <h1>, <p> making text bold, turning text into a heading, grouping sentences to form a paragraph, etc. Most tags come in pairs: an opening (starting) and a closing (ending) tag <title> title goes here </title> Some tags are self closing, such as a meta tag <meta name=“” content=“” /> Every open tag must correspondingly be closed (source: http://www.w3schools.com/html/html_intro.asp)

What does it look like? <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

Closer Look at DOCTYPE <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

DOCTYPE? <!DOCTYPE html PUBLIC … > The doctype declaration is important It tells the browser: what type of HTML you are using which convention you’ll need to follow when coding the website content For more info see recommended list of doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html Most common: xHTML 1.0 Transitional xHTML 1.0 Strict Newest: HTML5 (not a standard yet!)

Lookat HTML tag <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

HTML tag? <html> </html> Creates basic HTML document <html> The opening HTML tag Sets the starting point of your HTML document </html> The closing HTML tag Sets the closing point of your HTML document

Take a look at HEAD tag <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

HEAD tag? <head> </head> Contains header information for the page This is not rendered in the page itself Contains other tags like: <title>, <meta>, <link>, etc. <head> The opening head tag </head> The closing head tag

Look inside the HEAD <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

Inside the HEAD <title>Title of page</title> rendered in top of browser or browser tab <meta name=“description” content=“” /> There are 3 basic types of meta tags used: Content-type: tells browser which character set you’re using. Most common: UTF-8 Description: sets description of website that appears in search engine listings Keywords: lists out keywords and phrases that relate to your page, separated by commas.

Look that BODY tag <!DOCTYPE html PUBLIC … > <html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body> </html>

What is the BODY tag? <body> </body> Contains all the contents of the web page This is where all the content of your webpage goes <body> The opening body tag </body> The closing body tag

How do I style my HTML? HTML is not meant for style HTML is just raw content and structure (markup of the document) To style HTML, we use a stylesheet The stylesheet dictates how we present our content (HTML) to the user in the browser Cascading Style Sheets are used to style HTML

What is CSS? Cascading Style Sheets It’s a style language that defines the presentation of your HTML (colors, layout, text-formatting, etc.) Referred to as the presentation layer Recommended way to control presentation of your HTML document Own language with own syntax

How to include CSS? Inline Written on actual HTML tags Worst way to include CSS *avoid if possible, but there are some exceptions Embedded Written between <style> tag typically in the <head> Override any similar rules in external sheet Styles stay with HTML page and don’t carry over to other pages with your website External Typically loaded in the <head> with a <link> tag Best way to include CSS in document

Including CSS Internal: Written inline on HTML tags <body style=“background-color: #f00;”> Embedded: Written in a <style> tag <style type=“text/css” media=“screen”> body { background-color: #f00; } </style> External: Included as a separate document <link type=“text/css” href=“http://link/file.css” rel=“stylesheet” media=“screen” />

How CSS looks? #element-id { color: #fff; font-size: 12px; } .element-class { color: #f00; font-weight: 700; } (selectors, properties and values)

What is JS? Programming (scripting) language that adds functionality to website Behavior layer (functionality) Common Libraries: jQuery, MooTools

Tools to Write Simple text editor works perfectly fine for writing HTML and CSS Notepad, Notepad++, BBEdit, NetBeans, TextEdit, TextWrangler, TextMate, Dreamweaver, Vim

Helpful Links http://www.w3.org/ http://www.w3.org/html/ http://www.w3.org/Style/CSS/ http://www.w3schools.com/ http://www.htmldog.com/guides/htmlbeginner/

Tools to Have Web Developer Toolbar for Firefox Link: https://addons.mozilla.org/en-us/firefox/addon/web-developer/ Firebug for Firefox Link: https://addons.mozilla.org/en-US/firefox/addon/firebug/

Thank You! Any Questions? SlideShare: http://www.slideshare.net/katmilk/ katarinamilkova t: twitter.com/katmilk e: katarina.milkova@gmail.com

Web1O1 - Intro to HTML/CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web1O1 - Intro to HTML/CSS

Similar to Web1O1 - Intro to HTML/CSS (20)

Recently uploaded

Recently uploaded (20)

Web1O1 - Intro to HTML/CSS