HTML Structure
-
Upload
india-keith -
Category
Documents
-
view
21 -
download
0
description
Transcript of HTML Structure
![Page 1: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/1.jpg)
HTML Structure
Building a basic web page using notepad.
![Page 2: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/2.jpg)
Tags
The cat jumped over the fence.
The cat jumped over the fence.
<> and </> Case sensitive Open and closed Empty elements must be closed Multiple tags must be properly
nested
The cat jumped <b>over</b> the fence.
The cat jumped <b><i> over</i></b>the fence.
![Page 3: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/3.jpg)
Document Structure<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<title>Enter The Title Here</title>
<style type="text/css">body {color: yellow ; background: blue}</style>
</head>
<body>
</body>
</html>
![Page 4: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/4.jpg)
Change the Template
When using the template, remember to change the title and the colors to match with your webpage.
![Page 5: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/5.jpg)
Change the Tag Content<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<title>Enter The Title Here</title>
<style type="text/css">body {color: yellow ; background: blue}</style>
</head>
<body>
</body>
</html>
Change the color of the text and background to match your recipe
http://www.w3schools.com/html/html_colornames.asp
Rename title
![Page 6: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/6.jpg)
Body Tags<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<title>Enter The Title Here</title>
<style type="text/css">body {color: yellow ; background: blue}</style>
</head>
<body>
</body>
</html>
Enter your tags between the body tags
![Page 7: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/7.jpg)
Headings
Bob fell over the
chicken. [H1]
Bob fell over the chicken. [H6]
There are six heading sizes H1-H6
<h1>Bob fell over the chicken. [H1]</h1>
<h6>Bob fell over the chicken. [H6]</h6>
![Page 8: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/8.jpg)
Changing Colors
This is a H1 heading with color.
Example:<h1><font color=#ff0000>This is a H1 heading with color.</font></h1>
Color codes are available at http://www.w3schools.com/html/html_colors.asp
![Page 9: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/9.jpg)
Paragraph and Formatting Used for a block of text. It can
be for one sentence or 1000. I don’t recommend a block of text of a thousand sentences.
This is BOLD.
This is italics.
Bob and Tom are funny.
<p>Used for a block of text. It can be for one sentence or 1000. I don’t recommend a block of text of a thousand sentences.</p>
This is <b>BOLD</b>.
This is <i>italics</i>.
<font size=-1>Bob</font> and <font size=+3>Tom</font> are funny.
![Page 10: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/10.jpg)
Horizontal Rule
___________________
___________________
______
______________
______________
<hr />
<hr size=7 />
<hr width=50 />
<hr width=70% />
<hr size=7 width=70% />
![Page 11: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/11.jpg)
Line Breaks
First sentence. Second sentence. Third sentence. Fourth sentence.
First sentence.Second sentence.Third sentence.Fourth sentence.
Start on next line No closing Tag
First sentence. Second sentence. Third sentence. Fourth sentence.
First sentence.<br />Second sentence.<br />Third sentence.<br />Fourth sentence.<br />
![Page 12: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/12.jpg)
Align Attribute
Align left
Align center
Align right
Go Colts!
align=left
align=center
align=right
Example:
<H1 align=right>Go Colts!</H1>
![Page 13: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/13.jpg)
CenterThis is centered. <center>This is centered
</center>
![Page 14: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/14.jpg)
Unordered List
Monitor Keyboard CPU Speakers Mouse
<ul>
<li>Monitor
<li>Keyboard
<li>CPU
<li>Speakers
<li>Mouse
</ul>
![Page 15: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/15.jpg)
Ordered list
1. Monitor
2. Keyboard
3. CPU
4. Speakers
5. Mouse
<ol>
<li>Monitor
<li>Keyboard
<li>CPU
<li>Speakers
<li>Mouse
</ol>
![Page 16: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/16.jpg)
Pictures
Use .jpg Make sure image is
saved in your .html folder.
<img src=“filename“ />
<img src=“gs.jpg“ />
![Page 17: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/17.jpg)
Hyperlinks
Yahoo <a href="http://www.yahoo.com/">Yahoo</a>
![Page 18: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/18.jpg)
Sample<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<title>Enter The Title Here</title>
<style type="text/css">body {color: yellow ; background: blue}</style>
</head>
<body><h1>This is an example of how several tags are used</h1><p> I recommend using one tag per line. There are exceptions, such as <b>bold</b> and <i>italics</i> to highlight
specific words or phrases. The paragraph tag can span one or several lines. For large blocks of text use the paragraph tag multiple times, this way it is easier for the user to read.</p>
<br /><h3>Here is a list of my top 3 games</h3><ul><li>COD2<li>Half-Life<li>SH III</ul>
</body>
</html>
![Page 19: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/19.jpg)
![Page 20: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/20.jpg)
Getting Started Create a folder called your_name website Both your html file and your jpg file will
need to be in the same folder together in order to work.
![Page 21: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/21.jpg)
Getting Started Download the project.txt template from the
syllabus website in your folder Open project.txt Select File→Save As and change
project.txt to “your_name.html” Include quotes and when changing name of
fileUse underscore to separate your first and last
name
![Page 22: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/22.jpg)
![Page 23: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/23.jpg)
Delete project.txt file
![Page 24: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/24.jpg)
Editing Your Webpage Double click your_name.html to open it as a
webpage in your browser Then Right-click your_name.html → select open
with → notepad
![Page 25: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/25.jpg)
Editing Your Webpage Notepad and your web browser should both be
open You will use Notepad to edit and your browser to
view what you edited Edit your .html file incrementally and save it Then go to your browser and click refresh. You will
see the changes you made By saving and viewing your work incrementally you
can limit any mistakes to the changes you just made
Switch back and forth (editing and viewing) as you write your html.
![Page 26: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/26.jpg)
Final Project
Create a family tradition recipe webpage. Your website should include the minimum format and structural
elements (you may need to add more for aesthetic purposes): Title Two different heading sizes A horizontal rule and a line break Formatting to include bold and italics Web link to a website related to your primary ingredient A picture of the finished product One ordered and one unordered list A short description of the recipe using <p></p> tags Colored background and some colored text.
![Page 27: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/27.jpg)
Final Project The following criteria will influence the
grading of your project. Your project:
must contain all required format and structural elements plus content.
must be done in notepad saved with an html extension . If you use a web editor like FrontPage, Word, or Dreamweaver you will get a ZERO.
should be visually pleasing and organized. should work. Your web link should go to a real
working website. Your image should appear on your website.
![Page 28: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/28.jpg)
Submitting your work.
When complete, zip the contents of website folder (html and jpg files) and place the zip file into the drop box.
To zip your work (in XP) Highlight the files Right click highlighted files Send to Compressed folder
The zipped file will be created in your website folder. Submit your zipped file to the drop box.
![Page 29: HTML Structure](https://reader036.fdocuments.in/reader036/viewer/2022062517/56812fd4550346895d954e38/html5/thumbnails/29.jpg)
Helpful Links
http://www.htmlgoodies.com/ http://www.htmlhelp.com/reference/html40/olist.html http://werbach.com/barebones/barebones.html http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/html_colors.asp