Embed Size (px)
DESCRIPTION
Citation preview
Michael Lucy3V Business Solutions, LLC
WEB2.0 - BASIC HTML, C
SS,
DOM
+ A Touch of HTML5 & CSS3
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 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
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 purpleHeading</H1>
For individual elements using the STYLE attribute
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>
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
THANK YOU
![SBBN HMBT CBTJTLJU · ^ v o v o } } Z } } v X } l v Ì ] i v ] v À ] l o µ v À l ] i P ] o o r. Created Date: 3/3/2014 3:10:46 PM](https://img.pdfslide.us/doc/110x75/603633cceaaaae70d83c29f0/sbbn-hmbt-cbtjtlju-v-o-v-o-z-v-x-l-v-oe-i-v-v-l-o-v-l.jpg)
![,}u} ] vµ ] o ] - HCU | HCU Network Australia€¦ · 7 u i} XD] v u µ Uµv oo ]i}Ç } u ] v v]µ v } o u /#&5,(.3$#()"&-.&1)&#-)3-&-)&-#&()3-,(",& vµ } }i} X } o v v v](https://img.pdfslide.us/doc/110x75/5f75577ff393cb15b906bdb2/u-v-o-hcu-hcu-network-australia-7-u-i-xd-v-u-uv-oo-i-.jpg)
![CSA MODULE 3...3 " 0XOWL SURFHVVRU 6\VWHP ,QWHUFRQQHFWV ¾W o o o } ] v P v Z µ } ( ( ( ] ] v Ç u ] v } v v](https://img.pdfslide.us/doc/110x75/611003b9f0108f585b144405/csa-module-3-3-0xowl-surfhvvru-6vwhp-qwhufrqqhfwv-w-o-o-o-v-p.jpg)
