Scribd
Upload
6 views12 pages

HTML Basics for Beginners

This document introduces HTML (Hypertext Markup Language), which is used to create web pages. It explains that HTML files use markup tags to direct how content is displayed in a browser. It provides examples of basic HTML tags for page structure (<html>, <head>, <body>), text formatting (<h1>-<h6>, <p>), and comments. It emphasizes best practices like proper indentation and use of comments to organize HTML files.

Uploaded by

subramanyam62
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
6 views12 pages

HTML Basics for Beginners

This document introduces HTML (Hypertext Markup Language), which is used to create web pages. It explains that HTML files use markup tags to direct how content is displayed in a browser. It provides examples of basic HTML tags for page structure (<html>, <head>, <body>), text formatting (<h1>-<h6>, <p>), and comments. It emphasizes best practices like proper indentation and use of comments to organize HTML files.

Uploaded by

subramanyam62
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd

Introduction to HTML

Transcriptions Studio Workshop


Fall 2006
What is HTML?
 Hyper Text Markup Language
 Web authoring software language
 Specifically created to make World Wide
Web pages
 Created by Tim Berners-Lee in 1993 from
SGML
What is HTML?
 HTML files
 Text files
 Contain mark-up tags
 Tags direct how page is to be displayed by
browser
 Can be created from a simple text editor
 File extension “.htm” or “.html”
Creating an HTML file
 Notepad or Wordpad (PC) or SimpleText (Mac)
 First tag: <html>
 Indicates that you are starting an HTML document
 Last tag: </html>
 Indicates that you are ending an HTML document
 *Note* the open & close structure to HTML
 Fictional example: <sleep> and </sleep>
 Save file as “[Link]”
 This is a typical default title for home pages
 Windows may seem to prefer “.htm” but “.html” will also
work just fine.
[Link] Example
<html>

</html>
Creating an HTML file (cont.)
 Header information
 <head> to begin, and </head> to end
 Gives information about the page that is not displayed on the
page itself
 Page Title
 <title> to begin, and </title> to end
 Example: <title>Transcriptions Studio</title>
 *Note* that there are no spaces between “<title> and
“Transcriptions”, nor between “Studio” and “</title>

Challenge: How would you place title information in your


page’s header information?
Challenge answer:
<html>
<head>
<title>Transcriptions Studio</title>
</head>

</html>
Creating Text in HTML
 Body Tags
 <body> and </body>
 *Note* that all text that appears on the page must be
encapsulated within the body tags
 Text headings
 <h1> and </h1>
 There are six defined heading sizes
 <h1> (largest) through <h6> (smallest)
 Paragraphs
 <p> and </p>
Text Example
<html>
<header>
<title>Transcriptions Studio</title>
</header>
<body>

<h1>This is a big heading!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>
Text Example (cont.)
This is a big heading!
This is a smaller heading!

This is an example of a paragraph.


HTML Organization
 Spacing
 Spacing organizes your work!
 Spacing makes your files easy to read!
 Spacing makes no functional difference to your
web browser
 Comments
 Comments are notes in your HTML file
 Comments make no functional difference to
your web browser
 “<!--” begins a comment, and “ -->” ends it
Comments Example
<html>
<header>
<title>Transcriptions Studio</title>
</header>
<body>

<h1>This is a big header!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>

<!-- This is an example of a comment.-->

You might also like