3 v html_next_energy_03.27.2014_v1.0

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
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

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

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

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

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

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

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

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

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

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.

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.

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

<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

<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

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

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

 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

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

DISCUSSION!
Tables and Layout

 What is CSS? Cascading Style Sheets
 View some code and talk basics
 Why use CSS?
 Advantages to Workflow
 Cost Savings
 Implementations
 Resources
CSS

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 – (refer to HTML, but in context)
LI B {color: purple;}
CSS Selectors

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

3/27/14
Embedded style sheets:
<HTML><HEAD><TITLE>Stylin’!</TITLE>
<STYLE TYPE=“text/css”>
H1 {color: purple;}
P {font-size: 10pt; color: gray;}
</STYLE>
</HEAD>
…
</HTML>

3/27/14
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

3 v html_next_energy_03.27.2014_v1.0

3 v html_next_energy_03.27.2014_v1.0

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Ähnlich wie 3 v html_next_energy_03.27.2014_v1.0

Ähnlich wie 3 v html_next_energy_03.27.2014_v1.0 (20)

3 v html_next_energy_03.27.2014_v1.0