• Like
3 v html_next_energy_03.27.2014_v1.0
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

3 v html_next_energy_03.27.2014_v1.0



  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Michael Lucy 3V Business Solutions, LLC
  • 2.  What is Markup ? Markup is information that is added to a document to convey information about documents structure or presentation. Markup Elements are made of start tag <strong> and usually have a corresponding closing tag </strong>. A few exceptions are the <br/> and <img/> tag. E.G: <strong> HTML </strong> Markup
  • 3. What is HTML ? HTML stands for hyper Text Markup Language used widely to develop web pages over internet to publish the information. It is a basic markup language to develop web pages over internet . HTML has well defined syntax . All documents should follow a format structure. HTML
  • 4. The World Wide Web Consortium (W3C) is the primary organization that attempts to standardize HTML (other example, Twitter Bootstrap) W3C has defined HTML As an Application Of the Standard Generalized Markup Language (SGML). SGML is the language which is used to define other languages by specifying document structure in the form of DATA TYPE DEFINITION (DTD) . Standardization of HTML
  • 5. Focus on both consumers and producers “prosumers”. Interactive production and consumption of content, examples of web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, and mashups. HTML5 – Often referred to as the modern replacement of Flash, HTML5 allows for interactive production and consumption of media and multimedia (video, audio, graphics) CSS3 – Rich styling and additional features including transitions, gradients, grid-layouts and much more. Objective – Separation of data and presentation. Benefits include; separating front-end from server-side resources, lower maintenance costs, improve site performance, improve SEO and much more. Web 2.0 – HTML5 & CSS3
  • 6. HTML Document is a simple text file saved with the (.html or .htm ) extension . The HTML document is well structured and designed format as an application.  Within <html> tag basic Structure of the document relates two primary sections the “head” & the “body”. Detail
  • 7. The fundamental building block of HTML are TAGS; http://htmldog.com/reference/htmltags/ HTML tags have ATTRIBUTES, attributes are properties of the tag and every tag has a unique set of attributes. http://www.w3.org/TR/html4/index/attributes.html  While it is unrealistic to memorize every tag and every attribute for every tag, it is important to understand how to use both tags and attributes. Tags & Tag Attributes
  • 8. <html> <head> <title> Document Title Goes Here </title> …….Head Information Goes Here </head> <body> ….Document content & markup go Hear </body> </html> HTML Document Layout
  • 9. Block level elements : <p> , <h1> these elements include line break . Inline elements : <b> (bold) , <strong> <strong>. Miscellaneous elements : <img> , used to render image to the document. Browser specific elements : <marquee> , used to make the text to mobile into the browser window . Elements of <body> tag
  • 10. Html is not case sensitive : i.e. <b> Go boldly </b> vs <B>Go boldly </B> Html attribute values may be case sensitive. i.e. <img SRC=“test.gif”> vs <img src=“test.gif”> SAME but <img src=“test.gif”> vs <img src=“TEST.GIF”> DIFFERENT Rules of HTML
  • 11. HTML is sensitive to single white space character . i.e. <b>T e s t o f S p a c e s </b> <br/> o/p = T e s t o f S p a c e s HTML follows a content model <ol> <li> Element 1</li> </ol> Elements must have close tag unless empty. i.e. <p> This is closed </p> Rules of HTML Cont.
  • 12. A few tags such as horizontal rule <hr/> or line break <br/> or image <img/> do not require a close tag. Elements should be nested properly . <b><i>Nested tags are here <i></b> Attribute values should be quoted . <img src=“test.gif”> Rules of HTML Cont.
  • 13. Headings : The heading element are used to create “headlines” in documents. There are six different levels of headings Supported by html. <h1>……….</h1> ( first heading) . . . <h6>………..</h6> ( sixth heading) Core HTML
  • 14. <p> Tag :  It generally rendered flush left, with a ragged right margin. <br> Tag: Empty element , do no have closing tag. Used to break a line in a document. <div>, <span> Tags: Used to divide large section of group text. Paragraph & Breaks
  • 15. <div> Tag: Used to divide large section of group text. Div is one of the most important tags! It is used for developing “grid layouts”; grids, layouts, containers, boxes, sizing and much more. Problem with image size - “Put a Container Around it Example” Paragraph & Breaks Con't
  • 16. What is URL ? Stands for uniform resource locators . It is uniform way to refer to objects and services over internet . i.e. : www.yahoo.com URL of yahoo website which uniquely identifies It’s services . Linking And Images
  • 17. In HTML the main way to define hyperlinks is with the anchor element. In hypertext end points of link typically called as anchors. For linking purpose anchor <a> tag is used which again requires href attribute. The href attribute is set to the url of the target resource. i.e. <a title=”Click Here” class=”test” id=”test1” href=”http://nextenergy.org” target=”_blank”>Next Energy</a> Where the red text is the “Target” attribute (_blank, _parent) and the blue text is the “Anchor Text” and can be image, text, div, span, etc. - EXAMPLE Linking And Images
  • 18.  To insert or render the image to the html document <img> tag is used by setting it’s src attribute to the url of the image. It is an empty element , so no need to have a closing tag. Syntax: <img src=“flower.jpg”> The above element will render the image named flower to the document. The <img> Tag
  • 19. Height : Used to set the height of the image . Width : Used to set the width of the image. Alt : Incase if image is not rendered properly instead of broken image it will show some message of text. Border :Used to make the border to the image . (Note 1:Values of attributes above are measured in pixel unit.) (Note 2: Consistent with Web2.0, styles are encouraged over attributes.) (Note 3: The Alt attribute is VERY, VERY important for SEO purposes.) Attributes for <img> Tag
  • 20. DISCUSSION! Tables and Layout
  • 21.  What is CSS? Cascading Style Sheets  View some code and talk basics  Why use CSS?  Advantages to Workflow  Cost Savings  Implementations  Resources CSS
  • 22. 3/27/14 Rule Structure CSS Rule Structure
  • 23. 3/27/14 Selectors  Element Selectors – (refer to HTML tags) H1 {color: purple;} H1, H2, P {color: purple;}  Contextual – (refer to HTML, but in context) LI B {color: purple;} CSS Selectors
  • 24. 3/27/14 Applying CSS to HTML Inline Styles: <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple Heading</H1> For individual elements using the STYLE attribute
  • 25. 3/27/14 Applying CSS to HTML Embedded style sheets: <HTML><HEAD><TITLE>Stylin’!</TITLE> <STYLE TYPE=“text/css”> H1 {color: purple;} P {font-size: 10pt; color: gray;} </STYLE> </HEAD> … </HTML>
  • 26. 3/27/14 Applying CSS to HTML External style sheets: <HEAD> <LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”> </HEAD> This is true “separation” of style and content. Keeping all your styles in an external document is simpler