• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to HTML & CSS
 

Introduction to HTML & CSS

on

  • 708 views

An introduction to HTML and CSS for presentation to UrbanTxT at USC

An introduction to HTML and CSS for presentation to UrbanTxT at USC

Statistics

Views

Total Views
708
Views on SlideShare
705
Embed Views
3

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 3

http://127.0.0.1 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to HTML & CSS Introduction to HTML & CSS Presentation Transcript

    • HTML & CSSAn IntroductionBy Mario HernandezWeb Designer & Front-End DeveloperWeb: designsdrive.comTwitter: @DesignsDrive
    • AgendaHTML5● Document Object Model (DOM)● Doctype● Semantic Tags● Comments● Best practices
    • AgendaCSS3● What it is, how it works & how to use● IDs vs. Classes● Inline and Block Elements● Shorthand● FLOATS● Comments● Intro to CSS3 Properties (if time permits)
    • AgendaPutting it all together● Project Structure● Website Layouts● Tools to Improve Workflow
    • What is HTML?Wikipedia:is the main markup language for creating web pages and otherinformation that can be displayed in a web browser.
    • Setting the standardsWorld Wide Web Consortium (W3C)The Web Hypertext Application Technology Working Group(WHATWG) i
    • Document Object Model (DOM)The HTML DOM defines a standard way foraccessing and manipulating HTML documents.
    • DOCUMENTDOM
    • DOCUMENTROOT ELEMENTHTMLDOM
    • DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>DOM
    • DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>DOM
    • DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE>DOM
    • DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE> ELEMENT<p>ELEMENT<a>ELEMENT<H1>DOM
    • DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5<!Doctype html>
    • HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaning
    • HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaningExamples of non-semantic elements: <div> and <span> -Tells nothing about its content.Examples of semantic elements: <form>, <table>,and <img> - Clearly defines its content.
    • HTML5 Semantic ElementsNew HTML5 Semantic Elements Include:<header><nav><section><article><hgroup><canvas><video><audio><aside><figcaption><figure><footer>
    • HTML5 Semantic ElementsVisual Representation of new HTML5 Semantic Elements
    • Comments<!-- Single line HTML comment --><!-- This is a multiple line HTML commentwhen there is a need to be more detailed -->
    • Best Practices● Comment● Semantic Tags● Separate Markup, Styling and Scripting
    • HANDS-ON
    • What is CSS?Wikipedia:Cascading Style Sheets (CSS) is a style sheet language used fordescribing the look and formatting of a document written in a markuplanguage. Its most common application is to style web pages writtenin HTML and XHTML.
    • How it worksSyntax:A CSS rule has two parts, a selector and one or moredeclarations.
    • How to use● External Style Sheet● Internal Style Sheet● Inline Style
    • How to useExternal Stylesheet<head><link rel="stylesheet" type="text/css" href="styles.css"></head>You can use one or multiple stylesheets
    • How to useInternal Stylesheet<head><style type="text/css">body {color: black; font-family: Helvetica, Verdana,san-serif;}p {line-height: 1.5;font-size:14px;}</style></head>
    • How to useInline Style<div style="background: black; color: white">...</div>
    • Cascading● Browser default● External style sheet● Internal style sheet (in the head section)● Inline style (inside an HTML element)Rules are applied from top to bottom. Last rule willoverwrite previous rules.
    • IDs vs. ClassesIDs are prefixed with #Classes are prefixed with a period (.)Example: #myIDExample: .myClass
    • IDs vs. Classes<div id="myID">This is a container</div><div class="myClass">This is acontainer</div>IDs or Classes can use UPPER and lower case. They canalso use numeric values as well as non-alpha-numericvaluesExamples: MYID, myclass, my-id
    • Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>
    • Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>Block level elements are those that affect the structure andlayout of a page.Example: <div>, <p>, h1-h6
    • Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>Block level elements are those that affect the structure andlayout of a page.Example: <div>, <p>, h1-h6Block level elements generate a line break and can havedimensions.
    • Shorthandp {margin: 4px 4px 4px 4px;}p {margin:4px;}.box {border-top: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;border-left: 1px solid #000000;}.box {border: 1px solid #000;}
    • Shorthandbody {background-color: #FFFFFF;background-image: bg.jpg;background-position: left top;background-repeat: repeat;}body {background: #FFF url(bg.jpg) 0 0 no-repeat;}
    • FloatsHands-on demo
    • ResourcesTWITTER.comhttp://www.w3schools.com/http://paulaborowska.com/a-brief-introduction-to-html5-2/CSS-Tricks.comhttp://html5please.com/http://css3please.com/http://www.abookapart.com/products/html5-for-web-designershttp://www.abookapart.com/products/css3-for-web-designershttp://readwrite.com/2013/05/31/programming-core-skill-21st-century
    • QuestionsMario Hernandezhttp://designsdrive.comTwitter@DesignsDriveEmaildesignsdrive@gmail.com