Embed Size (px)
Citation preview
![Page 1: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/1.jpg)
HTML
![Page 2: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/2.jpg)
Anatomy of a Website
• Your Content• + HTML: Structure• + CSS: Presentation• = Your Website• A website is a way to present your
content to the world, using HTML and CSS to present that content & make it look good:
![Page 3: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/3.jpg)
HTML: What is it?
HTML stands for Hyper Text Markup
Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser
how to display the page
An HTML file can be created using a
simple text editor or a WYSIWIG editor
![Page 4: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/4.jpg)
HTML: Editors
Windows Mac
Free Notepad++, Aptana TextEdit, Smultron
$$ E-Text Editor TextMate, Coda, Espresso
Since HTML files are just text files, many programs can be used to create them. Some programs provide special assistance for handling HTML, like syntax-highlighting or autocompletion.
![Page 5: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/5.jpg)
History of HTML• Tim Berners-Lee created first HTML version in the late 1980s (as a
subset of SGML (Standard Generalized Markup Language)).
• Needed a simple way to share research among colleagues; piggy backed off newly evolving Internet (previously just text)
• HTML spread as multiple proprietary versions; in 1993 the IETF published a working draft of the first “official” HTML
• Simplicity made things easy for people new to computers and publishing
• Also left the “code” a mess, leaving every browser to handle different mistakes in its own way
• Soon, the World Wide Web Consortium (W3C) was created to draft a set of standards for all web browsers to adhere to
• The W3C and WhatWG are now working on HTML5, the next generation of HTML tags, which is being adopted gradually by browsers.
![Page 6: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/6.jpg)
Anatomy of an HTML tag
• Each tag has a "start tag", "end tag", some content in between, and optional attributes.
• <tagname attribute="value">• content• </tagname>
• <a href="http://www.google.com" >• Google• </a>
• Think of a tag as a "command" to the browser and of the attributes as modifiers of that command.
![Page 7: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/7.jpg)
HTML Basics
• The doctype isn't an actual tag, but it needs to be at start at every HTML page to tell browser which version of HTML you're using (HTML5, in example below).
• The html tag is always the first tag in the page.
• <!DOCTYPE html>• <html>• </html>
![Page 8: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/8.jpg)
Head & Body
• The head contains "meta" information about the page, information that the browser needs before rendering it.
• The body contains the actual content of the page.
• <!DOCTYPE html>
• <html>
• <head>
• <meta charset="utf-8">
• <title>Title of your page goes here</title>
• </head>
• <body>
• Bulk of your content here.
• </body>
• </html>
![Page 9: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/9.jpg)
What goes in the body?
• The body contains the actual content of the page.
![Page 10: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/10.jpg)
Headlines
• <h1>Header 1</h1>
• <h2>Header 2</h2>
• ...
• <h6>Header 6</h6>
• Header 1
• Header 2
• ... Header 6
![Page 11: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/11.jpg)
Paragraphs
• <p>Paragraph 1</p>• <p>Paragraph 2</p>• <p>Paragraph 3</p>
• Paragraph 1
• Paragraph 2
• Paragraph 3
![Page 12: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/12.jpg)
Line Breaks
• <p>
• Imagine there's no Heaven <br>
• It's easy if you try <br>
• No hell below us <br>
• Above us only sky <br>
• </p>
• Imagine there's no Heaven
• It's easy if you try
• No hell below us
• Above us only sky
• Notice: This tag does not need to be closed, since it doesn't encapsulate anything.
![Page 13: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/13.jpg)
Lists
• <ul>• <li>Helmets</li>• <li>Pads</li>• ...• </ul>
• Helmets• Pads• ...
![Page 14: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/14.jpg)
Ordered Lists
• <ol>• <li>Item 1</li>• <li>Item 2</li>• ...• </ol>
1. Item 12. Item 2
...
![Page 15: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/15.jpg)
Formatted Text
<em>Emphasized Info</em>
Emphasized Info
<strong>Important Info!</strong>
Important Info!
![Page 16: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/16.jpg)
Images
• <img src=http://www.google.com/images/srpr/logo1w.pngalt="Google">
![Page 17: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/17.jpg)
Links
• <a href="http://www.google.com">Google</a>
• <a href="http://www.google.com">
• <img src="http://www.google.com/images/srpr/logo1w.png"
• alt="Google">
• </a>
![Page 18: HTML 1 - St. Louis Public Schools€¦ · ,dD> W ] } t ] v } Á D & E } = = U v d Æ ] U ^ u µ o } v ¨ ¨ rd Æ ] } d Æ D U } U }](https://reader033.pdfslide.us/reader033/viewer/2022050606/5fad20d2040f1075be39f78c/html5/thumbnails/18.jpg)
HTML Save file Save file as .htm or .html to run it in a web browser
![K ( ( ] } ( Z } u u ] ] } v ( } v v Æ u ] v ] } v U d Z ...€¦ · K ( ( ] } ( Z } u u ] ] } v ( } v v Æ u ] v ] } v U d Z ] µ À v v Z µ u](https://img.pdfslide.us/doc/110x75/5f0269a77e708231d40426b6/k-z-u-u-v-v-v-u-v-v-u-d-z-k-z-u-u.jpg)
![Camsoft Maximizer CRM Subscription Agreement 2020 · í u } ( D Æ ] u ] Ì ZD ^ µ ] ] } v 'Z D Ed d Z ] ^ µ ] ] } v P u v } v ] } ( Z u v } v ] ] } v](https://img.pdfslide.us/doc/110x75/5f77564d145cd146be53b080/camsoft-maximizer-crm-subscription-agreement-2020-u-d-u-oe-zd-.jpg)
![d ] u d o ( } P d Z ] z ^ ] Æ Z ^ u ~Z P µ o l^ µ o u v Ç Æ u ] v ...krishnauniversity.ac.in/Examinations/timetables2016-17...d ] u d o ( } P d Z ] z ^ ] Æ Z ^ u ~Z P µ o l^](https://img.pdfslide.us/doc/110x75/600bb41e108071656e540e8f/d-u-d-o-p-d-z-z-z-u-z-p-o-l-o-u-v-u-v-d.jpg)
![Æ v d Ç Æ v ^ µ o ] d v ] } v E µ u W u } µ v · Æ v d Ç Æ v ^ µ o ] d v ] } v E µ u W u } µ v ð l ï ì l î ì í õ o ] v P o v ^ Z >> KZWKZ d/KE >d ï ì î ô õ](https://img.pdfslide.us/doc/110x75/5f2d9b71b98be0229f6841ca/-v-d-v-o-d-v-v-e-u-w-u-v-v-d-v-o-d-v.jpg)
![~2~ - WordPress.com · 2013. 3. 14. · ~4"~"! " January: :Cabbage::"Angi"Schneider" v P ] ] } [ Á ] ( v u } u } ] Æ ( } u ^ } µ Z d Æ X ^ Z v Z family enjoy many homesteading](https://img.pdfslide.us/doc/110x75/6124342b3f650627b019d968/2-2013-3-14-4-january-cabbageangischneider.jpg)
![} u v Ç d W o v - Eiger Design · W P î } ( í î } Ç ] P Z î ì Æ Æ } u v Ç d Z Z Á Z o o } u o o Ç v o } ] v Z ( ] Æ µ Á Z } ] o v Z o o v } Æ ò ì ì u u Æ](https://img.pdfslide.us/doc/110x75/5f62ed1e89d1dc3a1317e3b5/-u-v-d-w-o-v-eiger-design-w-p-p-z-u-v-.jpg)
![>dD E J Æ u - Extreme Scottish Triathlon · >dD E J Æ u ^ } ] Z d ] Z o } v î ì î ì >dD E J Æ u ^ } ] Z d ] Z o } v î ì î ì](https://img.pdfslide.us/doc/110x75/5ffe21b75ed6c011fe6735c5/dd-e-j-u-extreme-scottish-triathlon-dd-e-j-u-z-d-z-o-v.jpg)
![z u m 9 d 4 { 4 ] d è æ ç æ - RSCN Annual Report 2010.pdf · è æ ç æ z u m 9 d 4 { 4 ] d è S 8ø ?í iô T , D ?í ó í í @ C B îñ i B < ? A 7ã Eã 1 ÷ã iô T , D](https://img.pdfslide.us/doc/110x75/5ec4456abbaec001d325cb10/z-u-m-9-d-4-4-d-annual-report-2010pdf-z-u-m-9-d.jpg)
![Æ ] u v ( } X d Z X í z W Z Ç ] > } } Ç 6LQJOH 6OLW ... Laboratory/… · Æ ] u v ( } x d z x í z w z Ç ] > } } Ç u v } ( w z Ç ] u //d z } } l î rwkhu kdqg vrxqg zdyhv](https://img.pdfslide.us/doc/110x75/5fdb3325a5c8bc047a720169/-u-v-x-d-z-x-z-w-z-6lqjoh-6olw-laboratory-.jpg)
![Examining the Experts - FINAL 17 June 2018 · 2019-06-18 · Æ u ] v ] v P Z Æ d Z Z } o } ( Æ t ] v ] v ^ ] U v , } Á Z ( } u } µ o / u } À ( ( ] ] v Ç v Y µ o ] Ç } ( :](https://img.pdfslide.us/doc/110x75/5f85d4025100a0216c6900f3/examining-the-experts-final-17-june-2018-2019-06-18-u-v-v-p-z-d-z.jpg)
![R K Jain & Associates 17.06.17 Ggn · 2017-06-17 · ó E µ u } (d Æ U^d Us d U ^d U s U^ U v X U> µ Æ X '^d U^'^d U/'^d U ô d Æ Z D µ o ] o v ] ( ( v } ^ ( } u](https://img.pdfslide.us/doc/110x75/5e7646b7b17c2a14352437df/r-k-jain-associates-170617-ggn-2017-06-17-e-u-d-ud-us-d-u.jpg)
![d o Z P Z À ] } v } ( ( o ] v · Æ u o w b4&0 txhvwlrqv ve b4&0 txhvwlrqv dyhf vrq hw lpdjh ve > µ Æ u ] Æ u o } v u } v µ Æ o À](https://img.pdfslide.us/doc/110x75/5fd837941bc794697a2a183f/d-o-z-p-z-v-o-v-u-o-w-b40-txhvwlrqv-ve-b40-txhvwlrqv.jpg)
![V T U ] Packaging Price Lists...3ULFH ,QFOXGH /LG t,/d h < d^ À ] v w r r æ t ä x z s æ u á { s t æ x á u s w æ z á y x Á Á Á X u } u v Z u X } X Ì r í>ZKhE # 5](https://img.pdfslide.us/doc/110x75/607d9af76e58636b0404c5a7/v-t-u-packaging-price-lists-3ulfh-qfoxgh-lg-td-h-d-v-w-r-r-.jpg)
![3. Details for iari website DBT ATGC · 1 day ago · d u v } v ] ] } v W í X P o ] u ] W D Æ ] u µ u P ] ï ñ Ç ( } ^Z& l :Z& ~ P o Æ ] } v } ( ( ] À Ç ( } ^ l^d Á } u v](https://img.pdfslide.us/doc/110x75/5fee609a957f6a51884b92b9/3-details-for-iari-website-dbt-atgc-1-day-ago-d-u-v-v-v-w-x-p-o-.jpg)
![UNAM · Z îìíòXhv]À ] E ]}voµ v}u D Æ] }U/v ] µ } /vÀ ]P ]}v ,] ] UNAM](https://img.pdfslide.us/doc/110x75/5f54550fd0b48543577b80d8/-z-xhv-e-vo-vu-d-uv-v-p-v-unam.jpg)
![} v } µ µ Æ ( µ o D ] v W Z u ] µ Æ & µ o D ] v v ] î ì î](https://img.pdfslide.us/doc/110x75/62ab993ab1f3af1e1743d946/-v-o-d-v-w-z-u-amp.jpg)
![Æ ] u v ( } X d Z X í z W Z Ç ] > } } Ç](https://img.pdfslide.us/doc/110x75/61a80c8f98ea9f0f943a9033/-u-v-x-d-z-x-z-w-z-gt-.jpg)
![K ( ( ] } ( Z } u u ] ] } v ( } v v Æ u ] v ] } v U < o D](https://img.pdfslide.us/doc/110x75/6235b0659ebc312b392bb0f7/k-z-u-u-v-v-v-u-v-v-u-lt-o-d-.jpg)
![} v À ] } v } u u ] ] } v í ò D ] v ^ / W XK X } Æ ð ï ñ](https://img.pdfslide.us/doc/110x75/627c18ef49551a011a734ef5/-v-v-u-u-v-d-v-w-xk-x-.jpg)
![v ï W Ç Z } o } P ] · d v o v v À µ Æ W Ç X } P v ] ] À W [ ] v ] µ o u ! u v µ Æ d X í](https://img.pdfslide.us/doc/110x75/60501e80ebd9401e9177d2e7/v-w-z-o-p-d-v-o-v-v-w-x-p-v-w-v-o-u-.jpg)
![æ FINAL-110625.p… · Z ,/ ^ U D h v ] À ] Ç æ U U ä ã V ä ã W á](https://img.pdfslide.us/doc/110x75/5f8368b267352f565c48b1a1/-final-110625p-z-u-d-h-v-u-u-v-w-.jpg)
![} u ] v P Z u ] } v } ( ] P ] o u o } Ç Æ ] v · h D } d µ s / h v ] ( ] D v P u v D ] } & o } Á d µ E Á } l K^z^d D l W](https://img.pdfslide.us/doc/110x75/5e2fab22a3ddad4b8a28ea98/-u-v-p-z-u-v-p-o-u-o-v-h-d-d-s-h-v-d-v-p-u.jpg)