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

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
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
[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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
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
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
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
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
🐬 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
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 

Dernier (20)

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
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
[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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
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...
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
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
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 

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