Introduction to HTML
Download
Report
Transcript Introduction to HTML
Introduction to HTML
Hard-Coding
• What is hard-coding?
– Creating the page in a text editor just using HTML
• A Web designer should know how to hardcode an html file
– To create simple web pages
– To understand what is going on behind the scenes
of a web page
– So he/she can fix any problem with the webpage
being worked on
Slide 1
What is HTML?
• HTML stands for Hyper Text Markup
Language
– Set of commands which tell browser where to find
graphics, text, and links
• Created to allow people from all over the
world to view documents on the WWW
• Different platforms can view the same
documents simultaneously anywhere in the
world on any computer system
Slide 2
What is an HTML File?
• A text file containing small markup tags
– Tags are words or commands that appear in
<angle> brackets
• Must have an htm or html file extension
• Can be created using a simple text editor
– program that will allow you to type and save work
as a TEXT file (the one we’ll use is Notepad)
– key in all the tags by hand
Slide 3
Tags
• Tags tell the Web browser how to display
the page
– Everything that is not enclosed in tags will show
up as text
– Browsers know tags because they’re always
enclosed in <angle> brackets
• usually always in pairs <b>Melanie</b>
• Ending tag has forward slash / (end indicator)
– If it’s not enclosed in brackets, it will appear on the
screen
• Example: HTML for a simple sentence
– My name is <b>Melanie Brunson</b>.
– My name is Melanie Brunson.
Slide 4
More about Tags
• Can use CAPS, lower case, or MiXeD
– Doesn’t matter inside of tags
– However, we always use lowercase tags
– Why? Because of the latest web standards. The next
generation of HTML (XHTML) demands lowercase
tags
• Cannot have spaces: <h t m l>
• White Space
– All area on screen that doesn’t contain text
– Browsers ignore white space
– Need special tags to do line breaks or create large
spaces
• Space key, or striking enter doesn’t give white space
Slide 5
1st Codes
• Notice the first codes
– <!DOCTYPE >
• Specifies what version of HTML is used on the page
• (!- Indicates a comment that will not appear on the page)
– <html>
• Tells the browser to interpret every tag as HTML code until it
reaches </html>
• These tags will always start and end a page ( <html>
</html> )
– <head>
• This contains information about your page such as title &
author
• Used to catalog the page, does not appear in browser
• <title>Utah Education Network</title>
• The title is what you will see in the Title Bar of the browser
– <body>
• This contains the content that you see in your browser
Slide 6
To Insert White Space
• Line break
– <br> (this tag does not need a closing tag)
• Equal to pressing “Enter” on the keyboard
• Moves text down to next line
• Paragraph break
– <p> </p>
• Equal to pressing “Enter” twice on the keyboard
• Moves text down and leaves blank line
between
Slide 7
To View HTML
• View: Source (or right-mouse click & View Source)
• Go to http://www.uen.org/ and view source
Slide 8
HTML Document
• Three Main Parts
– Document Type Definition (DTD)
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
– Header
• Information such as title, keywords, description, etc.
– Body
• Content displayed on Browser
Slide 9
Try It
– Open Notepad (a text editor)
• Go to: Start All Programs Accessories Notepad
– Type the Following
• <html>
<head>
<title>Your Name Homepage</title></head>
<body>This is my first homepage. <b>This text is
bold</b>
</body>
</html>
– Be sure to save your text file with .html extension
(firstpage.html)
– View your page in your browser
Slide 10