尊敬的 微信汇率:1円 ≈ 0.046166 元 支付宝汇率:1円 ≈ 0.046257元 [退出登录]
SlideShare a Scribd company logo
HTML/CSS Tutorial
Definitions ,[object Object],[object Object],[object Object],[object Object]
HTML Page Format <HTML> <HEAD> <TITLE> Qi’s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML>
BODY Element ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Headings ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Headings <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1> Level-1 (H1) </H1> <H2 ALIGN=&quot;center&quot;> Level-2 (H2) </H2> <H3> <U>Level-3 (H3)</U> </H3> <H4 ALIGN=&quot;right&quot;> Level-4 (H4) </H4> <H5> Level-5 (H5) </H5> <H6> Level-6 (H6) </H6> </BODY> </HTML>
<P> Paragraph ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<BODY> <P>Here is some text </P> <P ALIGN=&quot;center&quot;> Centered text </P> <P><P><P> <P ALIGN=&quot;right&quot;> Right-justified text <! Note: no closing /P tag is not a problem> </BODY>
<PRE> Preformatted Text <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>
Special Characters &nbsp; Space &quot; &quot; &amp; & &gt; > &lt; < Use Character
Colors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonts <FONT COLOR=&quot;red&quot; SIZE=&quot;2&quot; FACE=&quot;Times Roman&quot;> This is the text of line one </FONT> <FONT COLOR=&quot;green&quot; SIZE=&quot;4&quot; FACE=&quot;Arial&quot;> Line two contains this text </FONT> <FONT COLOR=&quot;blue&quot; SIZE=&quot;6&quot; FACE=&quot;Courier&quot; The third line has this additional text </FONT> Note: <FONT> is now deprecated in favor of CSS.
Ordered (Numbered) Lists <OL TYPE=&quot;1&quot;> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE=&quot;I&quot; > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE=&quot;i&quot;> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>
Unordered (Bulleted) Lists <UL TYPE=&quot;disc&quot;> <LI> One </LI> <LI> Two </LI> <UL TYPE=&quot;circle&quot;> <LI> Three </LI> <LI> Four </LI> <UL TYPE=&quot;square&quot;> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>
Physical Character Styles <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR=&quot;GRAY&quot;>Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR>
Logical  Character  Styles <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR=&quot;GRAY&quot;><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE=&quot;Java Development Kit&quot;>JDK Acronym</ACRONYM>
<A> Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact <A HREF=&quot;htttp:www.microsoft.com&quot;> Microsoft </A> to report the problem. Link to a relative URL: See these <A HREF=&quot;#references&quot;> references </A> concerning our fine products. Link to a section within a URL:  Amazon provided a <A HREF=&quot;www.amazon.com/#reference&quot;> reference for our company. </A>
Naming a Section <H2> <A NAME=&quot;#references&quot;> Our References </A> </H2> Example
Hyperlinks <BODY> <H3>Welcome to <A HREF=&quot;http://www.cs.virginia.edu&quot;> <STRONG>Computer Science</STRONG></A> at the <A HREF=&quot;www.virginia.edu&quot;>University of Virginia.</A> </H3> </BODY>
Images ,[object Object],[object Object],[object Object],[object Object],[object Object]
Images Words align with middle of image Middle Image is left; words align with bottom of image Bottom Image is left; words align with top of image Top Image on right edge; text flows to left Right Image on left edge; text flows to right of image Left Image/Text Placement Align= position
Images <BODY> <img src=&quot;dolphin.jpg&quot;  align=&quot;left&quot;  width=&quot;150&quot; height=&quot;150&quot; alt=&quot;dolphin jump!&quot;> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br>   </BODY> </HTML>
ALIGN=&quot;left&quot;
ALIGN=&quot;right&quot;
ALIGN=“bottom&quot;
Tables <TABLE>  table tag <CAPTION>  optional table title <TR>  table row <TH>  table column header <TD>  table data element
Tables ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<TABLE> Element Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object]
<TABLE> Element Attributes BGCOLOR= color  -- background color of table, also valid  for <TR>, <TH>, and <TD> RULES= value  -- which internal lines are shown; values are  none, rows, cols, and all (default) EX:  <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”>
<TR> Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color  <TABLE ALIGN=&quot;center&quot; WIDTH=&quot;300&quot; HEIGHT=&quot;200&quot;> <TR ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; BGCOLOR=&quot;red&quot;><TD>One</TD><TD>Two</TD> <TR ALIGN=&quot;center&quot; VALIGN=&quot;middle&quot; BGCOLOR=&quot;lightblue&quot;><TD>Three</TD><TD>Four</TD> <TR ALIGN=&quot;right&quot; VALIGN=&quot;bottom&quot; BGCOLOR=&quot;yellow&quot;><TD>Five</TD><TD>Six</TD> </TABLE>
<TD> Table Cell Attributes Valid for the table cell: colspan --  how many columns this cell occupies rowspan – how many rows this cell occupies <TABLE ALIGN=&quot;center&quot; WIDTH=&quot;300&quot; HEIGHT=&quot;200&quot; border=&quot;1&quot;> <TR> <TD colspan=&quot;1&quot; rowspan=&quot;2&quot;>a</TD> <TD colspan=&quot;1&quot; rowspan=&quot;1&quot;>b</TD> </TR> <TR> <TD colspan=&quot;1&quot; rowspan=&quot;1&quot;>c</TD> </TR> </TABLE>
Frames ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Frames ,[object Object],[object Object],[object Object],[object Object]
Frames <FRAMESET ROWS=&quot; 75%,25% &quot;> <FRAMESET COLS=&quot;*,*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> <FRAMESET COLS=&quot;*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> </FRAMESET>
Frames <FRAMESET ROWS=&quot; 25%,75% &quot; <FRAMESET COLS=&quot;*,*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> <FRAMESET COLS=&quot;*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> </FRAMESET>
Frames <FRAMESET ROWS=&quot; *,* &quot;> <FRAMESET COLS=&quot; 15%, 2*, * &quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> </FRAMESET> <FRAMESET COLS=&quot; 40%, * &quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> </FRAMESET> </FRAMESET>
Cascading Style Sheets ,[object Object],[object Object],[object Object]
CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
Fizzics1 (no style sheet) <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. &quot;Gus&quot; Fizzics  has invented a <STRONG>practical</STRONG> technique for  transmutation! For more details, please see  <A HREF=&quot;give-us-your-gold.html&quot;>our transmutation thesis</A>. ... </BODY> </HTML> From: Core Web Programming, Marty Hall and Larry Brown, © 2002

More Related Content

What's hot

Html ppt
Html pptHtml ppt
Html ppt
Sanmuga Nathan
 
Intro to html
Intro to htmlIntro to html
Intro to html
anshuman rahi
 
Html Ppt
Html PptHtml Ppt
Html Ppt
vijayanit
 
Basic html
Basic htmlBasic html
Basic html
Drew Eric Noftle
 
Html tag
Html tagHtml tag
Html tag
NIRMAL FELIX
 
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
umapst
 
Lesson1 Intro to HTML
Lesson1 Intro to HTMLLesson1 Intro to HTML
Lesson1 Intro to HTML
David Asirvatham
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Html
HtmlHtml
Html for translators
Html for translatorsHtml for translators
Html for translators
Andrea Spila
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
Marjorie Sample
 
Why Semantic Content matters
Why Semantic Content mattersWhy Semantic Content matters
Why Semantic Content matters
Tom Bamford
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Html 101
Html 101Html 101
Html 101
Aldrin SuperGo
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Html
HtmlHtml
Html introduction
Html introductionHtml introduction
Html introduction
Dalia Elbadry
 
Lab 4: Introduction to HTML
Lab 4: Introduction to HTMLLab 4: Introduction to HTML
Lab 4: Introduction to HTML
vanessajade
 
C S S Top Elements
C S S  Top  ElementsC S S  Top  Elements
C S S Top Elements
ehorner
 

What's hot (20)

Html ppt
Html pptHtml ppt
Html ppt
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Basic html
Basic htmlBasic html
Basic html
 
Html tag
Html tagHtml tag
Html tag
 
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
 
Lesson1 Intro to HTML
Lesson1 Intro to HTMLLesson1 Intro to HTML
Lesson1 Intro to HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html
HtmlHtml
Html
 
Html for translators
Html for translatorsHtml for translators
Html for translators
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Why Semantic Content matters
Why Semantic Content mattersWhy Semantic Content matters
Why Semantic Content matters
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html 101
Html 101Html 101
Html 101
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
 
Html
HtmlHtml
Html
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Lab 4: Introduction to HTML
Lab 4: Introduction to HTMLLab 4: Introduction to HTML
Lab 4: Introduction to HTML
 
C S S Top Elements
C S S  Top  ElementsC S S  Top  Elements
C S S Top Elements
 

Viewers also liked

Baseball Player? or Porn Star??
Baseball Player?  or Porn Star??Baseball Player?  or Porn Star??
Baseball Player? or Porn Star??
jrlexjr
 
WaterPartners International
WaterPartners InternationalWaterPartners International
WaterPartners International
michaeljm007
 
HTML Basics
HTML BasicsHTML Basics
HTML Basics
Brian Dys Sahagun
 
Xml tutorial
Xml tutorialXml tutorial
Xml tutorial
seemadav1
 
Congo: The Quiet Crisis
Congo: The Quiet CrisisCongo: The Quiet Crisis
Congo: The Quiet Crisis
michaeljm007
 
NetTantra Web Development Brochure
NetTantra Web Development BrochureNetTantra Web Development Brochure
NetTantra Web Development Brochure
NetTantra Technologies
 
Rebel scrum prototype_1214
Rebel scrum prototype_1214Rebel scrum prototype_1214
Rebel scrum prototype_1214
Shawn Neal
 
Body building supplements
Body building supplementsBody building supplements
Body building supplements
Luffy115
 
DevOps kungfu
DevOps kungfu DevOps kungfu
DevOps kungfu
Reneshan Moodley
 
Bottled Water: Bad to the Last Drop
Bottled Water: Bad to the Last DropBottled Water: Bad to the Last Drop
Bottled Water: Bad to the Last Drop
michaeljm007
 
Latest Trends in Web Technologies
Latest Trends in Web TechnologiesLatest Trends in Web Technologies
Latest Trends in Web Technologies
bryanbibat
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
BuiltByHQ
 
La fata di ferro
La fata di ferroLa fata di ferro
La fata di ferro
Giovanna Esse
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
CREATIVITY: Renew Your Thinking, Transform Your Life
CREATIVITY: Renew Your Thinking, Transform Your LifeCREATIVITY: Renew Your Thinking, Transform Your Life
CREATIVITY: Renew Your Thinking, Transform Your Life
Efiong Etuk
 

Viewers also liked (16)

Baseball Player? or Porn Star??
Baseball Player?  or Porn Star??Baseball Player?  or Porn Star??
Baseball Player? or Porn Star??
 
WaterPartners International
WaterPartners InternationalWaterPartners International
WaterPartners International
 
HTML Basics
HTML BasicsHTML Basics
HTML Basics
 
Xml tutorial
Xml tutorialXml tutorial
Xml tutorial
 
Congo: The Quiet Crisis
Congo: The Quiet CrisisCongo: The Quiet Crisis
Congo: The Quiet Crisis
 
NetTantra Web Development Brochure
NetTantra Web Development BrochureNetTantra Web Development Brochure
NetTantra Web Development Brochure
 
Rebel scrum prototype_1214
Rebel scrum prototype_1214Rebel scrum prototype_1214
Rebel scrum prototype_1214
 
Body building supplements
Body building supplementsBody building supplements
Body building supplements
 
DevOps kungfu
DevOps kungfu DevOps kungfu
DevOps kungfu
 
Bottled Water: Bad to the Last Drop
Bottled Water: Bad to the Last DropBottled Water: Bad to the Last Drop
Bottled Water: Bad to the Last Drop
 
Latest Trends in Web Technologies
Latest Trends in Web TechnologiesLatest Trends in Web Technologies
Latest Trends in Web Technologies
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
La fata di ferro
La fata di ferroLa fata di ferro
La fata di ferro
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
CREATIVITY: Renew Your Thinking, Transform Your Life
CREATIVITY: Renew Your Thinking, Transform Your LifeCREATIVITY: Renew Your Thinking, Transform Your Life
CREATIVITY: Renew Your Thinking, Transform Your Life
 

Similar to Html tutorial

Html tags
Html tagsHtml tags
Html tags
Gaurav Jaiswal
 
Html
HtmlHtml
Html
HtmlHtml
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
Hinopak Motors Limited
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
phuphax
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Md. Sirajus Salayhin
 
Html ppt
Html pptHtml ppt
Html ppt
Iblesoft
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
Ray Villalobos
 
AK html
AK  htmlAK  html
AK html
gauravashq
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
anandha ganesh
 
Html
HtmlHtml
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
jlinabary
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Jerome Locson
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
Doncho Minkov
 
Html TAGS
Html TAGSHtml TAGS
Html TAGS
Pranil Dukare
 
Html
HtmlHtml
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
wangjiaz
 

Similar to Html tutorial (20)

Html tags
Html tagsHtml tags
Html tags
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
 
AK html
AK  htmlAK  html
AK html
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
 
Html
HtmlHtml
Html
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Html TAGS
Html TAGSHtml TAGS
Html TAGS
 
Html
HtmlHtml
Html
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
 

More from mohamed ashraf

Seo wordpress
Seo wordpressSeo wordpress
Seo wordpress
mohamed ashraf
 
File9350
File9350File9350
File9350
mohamed ashraf
 
Css
CssCss
Css
CssCss
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
mohamed ashraf
 
Html css
Html cssHtml css
Html css
mohamed ashraf
 
15 03-0460-00-0000-css-tutorial
15 03-0460-00-0000-css-tutorial15 03-0460-00-0000-css-tutorial
15 03-0460-00-0000-css-tutorial
mohamed ashraf
 
Php
PhpPhp
Ubi comp27nov04
Ubi comp27nov04Ubi comp27nov04
Ubi comp27nov04
mohamed ashraf
 
Phpwebdevelping
PhpwebdevelpingPhpwebdevelping
Phpwebdevelping
mohamed ashraf
 
Php
PhpPhp
Php
PhpPhp
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
mohamed ashraf
 
Php
PhpPhp

More from mohamed ashraf (14)

Seo wordpress
Seo wordpressSeo wordpress
Seo wordpress
 
File9350
File9350File9350
File9350
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
Html css
Html cssHtml css
Html css
 
15 03-0460-00-0000-css-tutorial
15 03-0460-00-0000-css-tutorial15 03-0460-00-0000-css-tutorial
15 03-0460-00-0000-css-tutorial
 
Php
PhpPhp
Php
 
Ubi comp27nov04
Ubi comp27nov04Ubi comp27nov04
Ubi comp27nov04
 
Phpwebdevelping
PhpwebdevelpingPhpwebdevelping
Phpwebdevelping
 
Php
PhpPhp
Php
 
Php
PhpPhp
Php
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Php
PhpPhp
Php
 

Recently uploaded

Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
Fuxnet [EN] .pdf
Fuxnet [EN]                                   .pdfFuxnet [EN]                                   .pdf
Fuxnet [EN] .pdf
Overkill Security
 
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
anilsa9823
 
So You've Lost Quorum: Lessons From Accidental Downtime
So You've Lost Quorum: Lessons From Accidental DowntimeSo You've Lost Quorum: Lessons From Accidental Downtime
So You've Lost Quorum: Lessons From Accidental Downtime
ScyllaDB
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
Elasticity vs. State? Exploring Kafka Streams Cassandra State Store
Elasticity vs. State? Exploring Kafka Streams Cassandra State StoreElasticity vs. State? Exploring Kafka Streams Cassandra State Store
Elasticity vs. State? Exploring Kafka Streams Cassandra State Store
ScyllaDB
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
manji sharman06
 
APJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes WebinarAPJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes Webinar
ThousandEyes
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to SuccessMongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
ScyllaDB
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Introduction to ThousandEyes AMER Webinar
Introduction  to ThousandEyes AMER WebinarIntroduction  to ThousandEyes AMER Webinar
Introduction to ThousandEyes AMER Webinar
ThousandEyes
 
CTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database MigrationCTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database Migration
ScyllaDB
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
Knoldus Inc.
 
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - MydbopsMySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
Mydbops
 
Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0
Neeraj Kumar Singh
 
Communications Mining Series - Zero to Hero - Session 2
Communications Mining Series - Zero to Hero - Session 2Communications Mining Series - Zero to Hero - Session 2
Communications Mining Series - Zero to Hero - Session 2
DianaGray10
 
Automation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI AutomationAutomation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI Automation
UiPathCommunity
 

Recently uploaded (20)

Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
Fuxnet [EN] .pdf
Fuxnet [EN]                                   .pdfFuxnet [EN]                                   .pdf
Fuxnet [EN] .pdf
 
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
 
So You've Lost Quorum: Lessons From Accidental Downtime
So You've Lost Quorum: Lessons From Accidental DowntimeSo You've Lost Quorum: Lessons From Accidental Downtime
So You've Lost Quorum: Lessons From Accidental Downtime
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
Elasticity vs. State? Exploring Kafka Streams Cassandra State Store
Elasticity vs. State? Exploring Kafka Streams Cassandra State StoreElasticity vs. State? Exploring Kafka Streams Cassandra State Store
Elasticity vs. State? Exploring Kafka Streams Cassandra State Store
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
 
APJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes WebinarAPJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes Webinar
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to SuccessMongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Introduction to ThousandEyes AMER Webinar
Introduction  to ThousandEyes AMER WebinarIntroduction  to ThousandEyes AMER Webinar
Introduction to ThousandEyes AMER Webinar
 
CTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database MigrationCTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database Migration
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
 
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - MydbopsMySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
 
Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0
 
Communications Mining Series - Zero to Hero - Session 2
Communications Mining Series - Zero to Hero - Session 2Communications Mining Series - Zero to Hero - Session 2
Communications Mining Series - Zero to Hero - Session 2
 
Automation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI AutomationAutomation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI Automation
 

Html tutorial

  • 2.
  • 3. HTML Page Format <HTML> <HEAD> <TITLE> Qi’s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML>
  • 4.
  • 5.
  • 6. Headings <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1> Level-1 (H1) </H1> <H2 ALIGN=&quot;center&quot;> Level-2 (H2) </H2> <H3> <U>Level-3 (H3)</U> </H3> <H4 ALIGN=&quot;right&quot;> Level-4 (H4) </H4> <H5> Level-5 (H5) </H5> <H6> Level-6 (H6) </H6> </BODY> </HTML>
  • 7.
  • 8. <BODY> <P>Here is some text </P> <P ALIGN=&quot;center&quot;> Centered text </P> <P><P><P> <P ALIGN=&quot;right&quot;> Right-justified text <! Note: no closing /P tag is not a problem> </BODY>
  • 9. <PRE> Preformatted Text <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>
  • 10. Special Characters &nbsp; Space &quot; &quot; &amp; & &gt; > &lt; < Use Character
  • 11.
  • 12. Fonts <FONT COLOR=&quot;red&quot; SIZE=&quot;2&quot; FACE=&quot;Times Roman&quot;> This is the text of line one </FONT> <FONT COLOR=&quot;green&quot; SIZE=&quot;4&quot; FACE=&quot;Arial&quot;> Line two contains this text </FONT> <FONT COLOR=&quot;blue&quot; SIZE=&quot;6&quot; FACE=&quot;Courier&quot; The third line has this additional text </FONT> Note: <FONT> is now deprecated in favor of CSS.
  • 13. Ordered (Numbered) Lists <OL TYPE=&quot;1&quot;> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE=&quot;I&quot; > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE=&quot;i&quot;> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>
  • 14. Unordered (Bulleted) Lists <UL TYPE=&quot;disc&quot;> <LI> One </LI> <LI> Two </LI> <UL TYPE=&quot;circle&quot;> <LI> Three </LI> <LI> Four </LI> <UL TYPE=&quot;square&quot;> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>
  • 15. Physical Character Styles <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR=&quot;GRAY&quot;>Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR>
  • 16. Logical Character Styles <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR=&quot;GRAY&quot;><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE=&quot;Java Development Kit&quot;>JDK Acronym</ACRONYM>
  • 17. <A> Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact <A HREF=&quot;htttp:www.microsoft.com&quot;> Microsoft </A> to report the problem. Link to a relative URL: See these <A HREF=&quot;#references&quot;> references </A> concerning our fine products. Link to a section within a URL: Amazon provided a <A HREF=&quot;www.amazon.com/#reference&quot;> reference for our company. </A>
  • 18. Naming a Section <H2> <A NAME=&quot;#references&quot;> Our References </A> </H2> Example
  • 19. Hyperlinks <BODY> <H3>Welcome to <A HREF=&quot;http://www.cs.virginia.edu&quot;> <STRONG>Computer Science</STRONG></A> at the <A HREF=&quot;www.virginia.edu&quot;>University of Virginia.</A> </H3> </BODY>
  • 20.
  • 21. Images Words align with middle of image Middle Image is left; words align with bottom of image Bottom Image is left; words align with top of image Top Image on right edge; text flows to left Right Image on left edge; text flows to right of image Left Image/Text Placement Align= position
  • 22. Images <BODY> <img src=&quot;dolphin.jpg&quot; align=&quot;left&quot; width=&quot;150&quot; height=&quot;150&quot; alt=&quot;dolphin jump!&quot;> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML>
  • 26. Tables <TABLE> table tag <CAPTION> optional table title <TR> table row <TH> table column header <TD> table data element
  • 27.
  • 28.
  • 29.
  • 30. <TABLE> Element Attributes BGCOLOR= color -- background color of table, also valid for <TR>, <TH>, and <TD> RULES= value -- which internal lines are shown; values are none, rows, cols, and all (default) EX: <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”>
  • 31. <TR> Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color <TABLE ALIGN=&quot;center&quot; WIDTH=&quot;300&quot; HEIGHT=&quot;200&quot;> <TR ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; BGCOLOR=&quot;red&quot;><TD>One</TD><TD>Two</TD> <TR ALIGN=&quot;center&quot; VALIGN=&quot;middle&quot; BGCOLOR=&quot;lightblue&quot;><TD>Three</TD><TD>Four</TD> <TR ALIGN=&quot;right&quot; VALIGN=&quot;bottom&quot; BGCOLOR=&quot;yellow&quot;><TD>Five</TD><TD>Six</TD> </TABLE>
  • 32. <TD> Table Cell Attributes Valid for the table cell: colspan -- how many columns this cell occupies rowspan – how many rows this cell occupies <TABLE ALIGN=&quot;center&quot; WIDTH=&quot;300&quot; HEIGHT=&quot;200&quot; border=&quot;1&quot;> <TR> <TD colspan=&quot;1&quot; rowspan=&quot;2&quot;>a</TD> <TD colspan=&quot;1&quot; rowspan=&quot;1&quot;>b</TD> </TR> <TR> <TD colspan=&quot;1&quot; rowspan=&quot;1&quot;>c</TD> </TR> </TABLE>
  • 33.
  • 34.
  • 35. Frames <FRAMESET ROWS=&quot; 75%,25% &quot;> <FRAMESET COLS=&quot;*,*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> <FRAMESET COLS=&quot;*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> </FRAMESET>
  • 36. Frames <FRAMESET ROWS=&quot; 25%,75% &quot; <FRAMESET COLS=&quot;*,*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> <FRAMESET COLS=&quot;*,*&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> <FRAME SRC=&quot;http://www.virginia.edu&quot;> </FRAMESET> </FRAMESET>
  • 37. Frames <FRAMESET ROWS=&quot; *,* &quot;> <FRAMESET COLS=&quot; 15%, 2*, * &quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> </FRAMESET> <FRAMESET COLS=&quot; 40%, * &quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> <FRAME SRC=&quot;http://www.cs.virginia.edu/&quot;> </FRAMESET> </FRAMESET>
  • 38.
  • 39.
  • 40. CSS H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
  • 41. Fizzics1 (no style sheet) <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. &quot;Gus&quot; Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF=&quot;give-us-your-gold.html&quot;>our transmutation thesis</A>. ... </BODY> </HTML> From: Core Web Programming, Marty Hall and Larry Brown, © 2002
  翻译: