Michael Lucy
3V Business Solutions, LLC
 What is Markup ?
Markup is information that is added to a document to
convey information about documents structure or
p...
What is HTML ?
HTML stands for hyper Text Markup Language used widely
to develop web pages over internet to publish the
i...
The World Wide Web Consortium (W3C) is the primary
organization that attempts to standardize
HTML (other example, Twitter...
Focus on both consumers and producers “prosumers”. Interactive
production and consumption of content, examples of web 2.0...
HTML Document is a simple text file saved with the
(.html or .htm ) extension .
The HTML document is well structured and...
The fundamental building block of HTML are TAGS;
http://htmldog.com/reference/htmltags/
HTML tags have ATTRIBUTES, attrib...
<html>
<head>
<title>
Document Title Goes Here
</title>
…….Head Information Goes Here
</head>
<body>
….Document content & ...
Block level elements :
<p> , <h1> these elements include line break .
Inline elements :
<b> (bold) , <strong> <strong>...
Html is not case sensitive :
i.e. <b> Go boldly </b> vs <B>Go boldly </B>
Html attribute values may be case sensitive.
i...
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 ...
A few tags such as horizontal rule <hr/> or line break
<br/> or image <img/> do not require a close tag.
Elements should ...
Headings :
The heading element are used to create “headlines”
in documents. There are six different levels of
headings S...
<p> Tag :
 It generally rendered flush left, with a ragged
right margin.
<br> Tag:
Empty element , do no have closing ...
<div> Tag:
Used to divide large section of group text.
Div is one of the most important tags! It is used
for developing ...
What is URL ?
Stands for uniform resource locators .
It is uniform way to refer to objects and services over internet
.
...
In HTML the main way to define hyperlinks is with the
anchor element. In hypertext end points of link typically
called as...
 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 ima...
Height : Used to set the height of the image .
Width : Used to set the width of the image.
Alt : Incase if image is not...
DISCUSSION!
Tables and Layout
 What is CSS? Cascading Style Sheets
 View some code and talk basics
 Why use CSS?
 Advantages to Workflow
 Cost Savi...
3/27/14
Rule Structure
CSS Rule Structure
3/27/14
Selectors
 Element Selectors – (refer to HTML tags)
H1 {color: purple;}
H1, H2, P {color: purple;}
 Contextual –...
3/27/14
Applying CSS to HTML
Inline Styles:
<H1 STYLE=“color: blue; font-size: 20pt;”>A large purple
Heading</H1>
For indi...
3/27/14
Applying CSS to HTML
Embedded style sheets:
<HTML><HEAD><TITLE>Stylin’!</TITLE>
<STYLE TYPE=“text/css”>
H1 {color:...
3/27/14
Applying CSS to HTML
External style sheets:
<HEAD>
<LINK REL=stylesheet” TYPE=“text/css”
HREF=“styles/mystyles.css...
3 v html_next_energy_03.27.2014_v1.0
Upcoming SlideShare
Loading in …5
×

3 v html_next_energy_03.27.2014_v1.0

274 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
274
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3 v html_next_energy_03.27.2014_v1.0

  1. 1. Michael Lucy 3V Business Solutions, LLC
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. DISCUSSION! Tables and Layout
  21. 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. 22. 3/27/14 Rule Structure CSS Rule Structure
  23. 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. 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. 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. 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

×