Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$...
Transcript of Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$...
![Page 1: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/1.jpg)
Getting Started with HTML5 & CSS3
Raja Tamil Technology Teacher
SoftAuthor02 Page Structure
![Page 2: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/2.jpg)
02 HTML Page Structure
• What and Why?
• HTML Tags
• Elements
• Setting up the project
• How to structure your resume content
SoftAuthor02 Page Structure
![Page 3: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/3.jpg)
Page Structure
SoftAuthor
tagJohn Smithtag
tagprofiletag
•Appropriate tag to markup the content.
• Why is important?
02 Page Structure
![Page 4: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/4.jpg)
Page Structure… Why?
SoftAuthor02 Page Structure
Exam
• Write HTML and CSS code
• Submit… meaning putting it online
• Based on how well you structure your page
• Google ranks you when searching your content
![Page 5: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/5.jpg)
a. HTML Tags…
SoftAuthor01 Introduction
<html>
<head>
<body>
<h1> <div><h6>
<ul>
<li><p> <a>
<img><ol>
• Opening “<“ angle bracket, then HTML tag name and “>” closing angle bracket
<header>
<footer>
<section>
![Page 6: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/6.jpg)
a. HTML Tags …
SoftAuthor01 Introduction
<html>top level tag - all the content would go inside in a web page
<head>Head - css file link, other meta data for SEO etc, title
Body - the content you see on the browser should go here
<body>
![Page 7: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/7.jpg)
a. HTML Tags …
SoftAuthor01 Introduction
<h1><h2><h3><h4><h5><h6>Heading1 to Heading 6 - up to you and depends on how many head levels you have in a web page
<p>P - paragraph
A - anchor click
<a>
![Page 8: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/8.jpg)
a. HTML Tags …
SoftAuthor01 Introduction
Unordered List:
<ul>
<ol>Ordered List:
• List1
• List2
<li>
1. List1
2. List2
List item - each item inside the list
![Page 9: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/9.jpg)
a. HTML Tags …
SoftAuthor01 Introduction
Division / section - when not sure which tag to use
<div>
<img>Image - used to add image without css
![Page 10: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/10.jpg)
a. HTML5 Tags …
SoftAuthor01 Introduction
<header>
<footer> <section>
Header - where all the header content goes
![Page 11: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/11.jpg)
a. HTML Element
SoftAuthor01 Introduction
<p>this a paragraph
• An opening tag and some content then closing tag called HTML element.
</p>Starting tag Ending tagContent
![Page 12: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/12.jpg)
a. HTML Element…
SoftAuthor01 Introduction
<p>this a paragraph
• Nested Element
</p><body> </body>
• Parent, Sibling and children relationship
very common and important
![Page 13: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/13.jpg)
a. HTML Element…
SoftAuthor01 Introduction
<h1>this a paragraph
• Nested Element Test (Flowchart)
<a>link</a></h1>
<body>
</body>
<div>
</div></div><div>another section
![Page 14: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/14.jpg)
a. Setting up the project…
SoftAuthor01 Introduction
index.html<!DOCTYPE html><html><head><title>My First HTML page</title>
</head><body>your content goes here (what you see in the browser)
</body></html>
![Page 15: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/15.jpg)
HTML page structure
SoftAuthor01 Introduction
Name, title
Work Experience
Skills
Education
Volunteer
Keep in touch
<h1> <h2>
<ul> <li>
<p>
<ol>
• Let’s make a resume
![Page 16: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/16.jpg)
SoftAuthor01 Introduction
Flow Chart
![Page 17: Getting Started with HTML5 & CSS3Getting Started with HTML5 & CSS3 Raja Tamil Technology Teacher!"#$ %&$'"(02 Page Structure](https://reader034.fdocuments.us/reader034/viewer/2022052012/60293831cfbad9574c173e64/html5/thumbnails/17.jpg)
Block Inline
SoftAuthor01 Introduction
<h1>
<div>
<h6> <ul>
<li><p>
<a> <img>
<ol>
<header>
<footer>
<section>
<em> <strong>
<input> <span>
DEMO & Flowchart