SlideShare une entreprise Scribd logo
1  sur  41
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

Contenu connexe

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

En vedette

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 Internationalmichaeljm007
 
Xml tutorial
Xml tutorialXml tutorial
Xml tutorialseemadav1
 
Congo: The Quiet Crisis
Congo: The Quiet CrisisCongo: The Quiet Crisis
Congo: The Quiet Crisismichaeljm007
 
Rebel scrum prototype_1214
Rebel scrum prototype_1214Rebel scrum prototype_1214
Rebel scrum prototype_1214Shawn Neal
 
Body building supplements
Body building supplementsBody building supplements
Body building supplementsLuffy115
 
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 Dropmichaeljm007
 
Latest Trends in Web Technologies
Latest Trends in Web TechnologiesLatest Trends in Web Technologies
Latest Trends in Web Technologiesbryanbibat
 
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 WorldBuiltByHQ
 
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 DesignKoombea
 
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 LifeEfiong Etuk
 

En vedette (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
 

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

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

Dernier

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Dernier (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

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