some common html elements
TRANSCRIPT
![Page 1: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/1.jpg)
SOME COMMON HTML ELEMENTS
PROF. DAVID ROSSITER
1/22
![Page 2: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/2.jpg)
AFTER THIS PRESENTATIONYou'll be able to apply headings and sections within your page
You'll be able to create different types of lists
You'll be able to write comments in the code
2/22
![Page 3: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/3.jpg)
ELEMENTS WE WILL LOOK ATHeadings <h1> <h2> <h3> <h4> <h5> <h6>
Sections <section>
Lists <ul> and <ol> together with <li>
Comments <!‐‐ a comment ‐‐>
3/22
![Page 4: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/4.jpg)
QUICK REMINDER - SIMPLE WEB PAGE<!DOCTYPE html><html><head> <title>A Simple Web Page</title> <meta name="author" content="David Rossiter"></head><body> <h1>My Web Page</h1> <p>This web page is so awesome!</p></body></html>
4/22
![Page 5: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/5.jpg)
HTML HEADINGS<h1> <h2> <h3> . . . <h6> are used for headings
Browsers show <h1> bigger than <h2><h2> bigger than <h3>, and so on
People often 'cheat' by using these elementsto easily generate different size text
5/22
![Page 6: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/6.jpg)
HEADING TAGSA simple example of heading elements
<h1>Introduction to Something</h1><h2>An Area of Something</h2><h3>A SubArea...</h3><p>This subarea is fun! Let's discuss it here in detail.</p>
6/22
![Page 7: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/7.jpg)
Introduction toSomethingAn Area of Something
A SubArea...
This subarea is fun! Let's discuss it here indetail.
7/22
![Page 8: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/8.jpg)
LOOKS BORING?The elements are shown using the default browser style
We can apply a different style to make things look better
Let's apply the style used by this presentation
Later we will look at style in depth
8/22
![Page 9: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/9.jpg)
INTRODUCTION TO SOMETHINGAN AREA OF SOMETHING
A SUB-AREA...This sub-area is fun! Let's discuss it here in detail.
9/22
![Page 10: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/10.jpg)
USING SECTION<section> is used to indicate a section
<section> <h1>Introduction to Something</h1> <p>Let's discuss something here!</p></section>
10/22
![Page 11: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/11.jpg)
Introduction to Something
Let's discuss something here!
11/22
![Page 12: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/12.jpg)
A SIMPLE LIST USING BULLETSNow let's consider HTML lists
<ul> means unordered list, <li> means list item<ul> <li>The first item</li> <li>The second item...</li> <li>Yes... the third item!</li></ul>
12/22
![Page 13: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/13.jpg)
The first itemThe second item...Yes... the third item!
13/22
![Page 14: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/14.jpg)
A SIMPLE LIST USING NUMBERS<ol> means ordered list
<ol> <li>The first item</li> <li>The second item...</li> <li>Yes... the third item!</li></ol>
14/22
![Page 15: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/15.jpg)
1. The first item2. The second item...3. Yes... the third item!
15/22
![Page 16: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/16.jpg)
CHANGING THE START NUMBERAdd start="number" to fix the starting number
<ol start="1999"> <li>In this year I was born...</li> <li>In this year I learned to walk...</li> <li>In this year I learned to program...</li> <li>In this year I learned SPA techniques...</li></ol>
16/22
![Page 17: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/17.jpg)
1999. In this year I was born...2000. In this year I learned to walk...2001. In this year I learned to
program...2002. In this year I learned SPA
techniques...
17/22
![Page 18: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/18.jpg)
REVERSING THE ORDERAdd reversed to reverse the order
<ol start="2002" reversed> <li>In this year I learned SPA techniques...</li> <li>In this year I learned to program...</li> <li>In this year I learned to walk...</li> <li>In this year I was born...</li></ol>
18/22
![Page 19: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/19.jpg)
2002. In this year I learned SPAtechniques...
2001. In this year I learned toprogram...
2000. In this year I learned to walk...1999. In this year I was born...
19/22
![Page 20: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/20.jpg)
USING A LETTERAdd type="A" to use a letter
<ol type="A"> <li>is for 'Anchor'...</li> <li>is for 'Body'...</li> <li>is for 'Cdata'...</li> <li>is for 'Div'...</li></ol>
20/22
![Page 21: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/21.jpg)
A. is for 'Anchor'...B. is for 'Body'...C. is for 'Cdata'...D. is for 'Div'...
21/22
![Page 22: Some Common HTML Elements](https://reader030.vdocument.in/reader030/viewer/2022020308/5695d5481a28ab9b02a4c0d3/html5/thumbnails/22.jpg)
COMMENTSA comment looks like this: <!‐‐ a comment ‐‐>
<html><! This is a simple demonstration of using comments in a web page ><head> <meta name="author" content="David Rossiter"> <! I can't believe how amazing that guy really is! ></head><body> <! Here's my simple 'to do' list > <p>Items I need to fix in my business:</p> <ol> <li>The people</li> <li>The process</li> <li>The product</li> </ol> <! That's a lot of things to fix! I better get started soon. ></body></html>
Comments can be added anywhere
22/22