27
Michael Lucy 3V Business Solutions, LLC WEB2.0 - BASIC HTML, CSS, DOM + A Touch of HTML5 & CSS3

3 v html_next_energy_03.27.2014_v1.0

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: 3 v html_next_energy_03.27.2014_v1.0

Michael Lucy3V Business Solutions, LLC

WEB2.0 - BASIC HTML, C

SS,

DOM

+ A Touch of HTML5 & CSS3

Page 2: 3 v html_next_energy_03.27.2014_v1.0

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

Page 3: 3 v html_next_energy_03.27.2014_v1.0

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

Page 4: 3 v html_next_energy_03.27.2014_v1.0

The World Wide Web Consortium (W3C) is the primary organization that attempts to standardizeHTML (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

Page 5: 3 v html_next_energy_03.27.2014_v1.0

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

Page 6: 3 v html_next_energy_03.27.2014_v1.0

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

Page 7: 3 v html_next_energy_03.27.2014_v1.0

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

Page 8: 3 v html_next_energy_03.27.2014_v1.0

<html><head><title>Document Title Goes Here</title>…….Head Information Goes Here</head><body>….Document content & markup go Hear</body></html>

HTML Document Layout

Page 9: 3 v html_next_energy_03.27.2014_v1.0

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

Page 10: 3 v html_next_energy_03.27.2014_v1.0

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

Page 11: 3 v html_next_energy_03.27.2014_v1.0

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.

Page 12: 3 v html_next_energy_03.27.2014_v1.0

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.

Page 13: 3 v html_next_energy_03.27.2014_v1.0

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

Page 14: 3 v html_next_energy_03.27.2014_v1.0

<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

Page 15: 3 v html_next_energy_03.27.2014_v1.0

<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

Page 16: 3 v html_next_energy_03.27.2014_v1.0

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

Page 17: 3 v html_next_energy_03.27.2014_v1.0

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

Page 18: 3 v html_next_energy_03.27.2014_v1.0

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

Page 19: 3 v html_next_energy_03.27.2014_v1.0

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

Page 20: 3 v html_next_energy_03.27.2014_v1.0

DISCUSSION!

Tables and Layout

Page 21: 3 v html_next_energy_03.27.2014_v1.0

What is CSS? Cascading Style Sheets

View some code and talk basics Why use CSS?

Advantages to Workflow Cost Savings

Implementations Resources

CSS

Page 22: 3 v html_next_energy_03.27.2014_v1.0

3/27/14

Rule Structure

CSS Rule Structure

Page 23: 3 v html_next_energy_03.27.2014_v1.0

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

Page 24: 3 v html_next_energy_03.27.2014_v1.0

3/27/14

Applying CSS to HTML

Inline Styles:

<H1 STYLE=“color: blue; font-size: 20pt;”>A large purpleHeading</H1>

For individual elements using the STYLE attribute

Page 25: 3 v html_next_energy_03.27.2014_v1.0

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>

Page 26: 3 v html_next_energy_03.27.2014_v1.0

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

Page 27: 3 v html_next_energy_03.27.2014_v1.0

THANK YOU