getting started with html5 & css3getting started with html5 & css3 raja tamil technology...
TRANSCRIPT
Getting Started with HTML5 & CSS3
Raja Tamil Technology Teacher
SoftAuthor02 Page Structure
02 HTML Page Structure
• What and Why?
• HTML Tags
• Elements
• Setting up the project
• How to structure your resume content
SoftAuthor02 Page Structure
Page Structure
SoftAuthor
tagJohn Smithtag
tagprofiletag
•Appropriate tag to markup the content.
• Why is important?
02 Page Structure
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
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>
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>
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>
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
a. HTML Tags …
SoftAuthor01 Introduction
Division / section - when not sure which tag to use
<div>
<img>Image - used to add image without css
a. HTML5 Tags …
SoftAuthor01 Introduction
<header>
<footer> <section>
Header - where all the header content goes
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
a. HTML Element…
SoftAuthor01 Introduction
<p>this a paragraph
• Nested Element
</p><body> </body>
• Parent, Sibling and children relationship
very common and important
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
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>
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
SoftAuthor01 Introduction
Flow Chart
Block Inline
SoftAuthor01 Introduction
<h1>
<div>
<h6> <ul>
<li><p>
<a> <img>
<ol>
<header>
<footer>
<section>
<em> <strong>
<input> <span>
DEMO & Flowchart