HTML Course

Master the basics of web development.

Down Arrow

Intro to HTML

    Welcome

Slide 1: Introduction to Web & HTML

  • HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications.
  • The term "web" typically refers to the World Wide Web (WWW), a system of interconnected documents and other resources, linked by hyperlinks and accessible via the internet.
  • The web is a foundational part of the internet and allows users to navigate, view, and interact with a vast array of information through web browsers.

Slide 2: Topics

  • Web Terminology
  • HTML
  • What is HTML
  • Parts of an HTML Document
  • HTML Tags
  • Required
  • Common

Slide 3: Internet vs. WWW

  • Most people use the two terms interchangeably but they are in fact different.
  • The Internet is a vast international network made up of computers and the physical connections (wires, routers, etc.) allowing them to communicate.
  • The World Wide Web (WWW or just the Web) is a collection of software that spans the Internet and enables the interlinking of documents and resources.
  • Provides a way of accessing information on the Internet.

Slide 4: Web Servers and Clients

  • A Web server is a computer that is programmed to send files to browsers on other computers connected to the Internet.
  • The Web browser, such as Firefox or Internet Explorer, is the client that sends a request for a Web page.
  • The Web server answers the request and delivers the requested page to the browser so you can view it.

Slide 5: HTTP

  • Stands for HyperText Transfer Protocol
  • Allows computers on the WWW to communicate with one another.
  • Handles the “request” sent to the Web server and the “response” received from the Web server.

Slide 6: URLs

  • Stands for Uniform Resource Locator
  • Also called the Web page’s address
  • You typically type it into your Web browser’s location bar when you want to view a Web page

Slide 7: HTML

  • Stands for HyperText Markup Language
  • Used to create a Web page
  • Made up of tags that specify the structure of the document (this section is a heading, this section is a paragraph, etc.)

Slide 8: HTML Tags

  • Most HTML tags work in pairs. There is an opening and a closing tag. For example:
  • <p>Some content here.</p>
  • The <p>…</p> tag displays a paragraph
  • <p> opens the paragraph (opening tag)
  • </p> closes the paragraph (closing tag)
  • “Some content here.” will be displayed on the page

Slide 9: Self-closing Tags

  • Some HTML tags are self-closing. For example:
  • <br /> The <br /> tag will display a line break.

Slide 10: Required Tags

  • All HTML documents should have <html> <head> and <body> tags along with the DOCTYPE identifier.
  • !DOCTYPE : Tells the browser which set of standards the page adheres to
  • <html>…</html> -- Surrounds the contents of the entire page
  • <head>…</head> -- Lists the identification information on the page such as the title
  • <title>…</title> -- Gives the name of the page that appears in the top of the browser window
  • <body>…</body> -- Frames the content of the page to be displayed in the browser

Slide 11: Basic HTML Template

  • Here is an example of a basic HTML template:
  • <!DOCTYPE html><br> <html>
    <head>
    <title>My First Page</title><br> </head>
    <body>
    <p>This is my first web page.</p>
    </body>
    </html>

Slide 12: Some Common HTML Tags and Their Meanings

  • <p>…</p> -- Creates a paragraph
  • <br /> -- Adds a line break
  • <hr /> -- Separates sections with a horizontal rule
  • <h1>…</h1> -- Displays a heading (h1-h6)
  • <!--…--> -- Inserts a comment
  • <ol>…</ol> -- Creates an ordered list
  • <ul>…</ul> -- Creates an unordered list
  • <img /> -- Inserts an image into the document
  • <a>…</a> -- Inserts a link into the document

Slide 13: Paragraph Example

  • <p>The exam next week will consist of T/F, multiple choice, short answer, and pseudocode questions. You cannot use a calculator.</p>
  • <p>After the exam, we will learn JavaScript. It should be fun!!</p>

Slide 14: Line Break Example

  • <p>Roses are Red. <br /> Violets are Blue. <br /> You should study for Exam 1. <br /> It will be good for you!</p>

Slide 15: Horizontal Rule Example

  • <p>The exam next week will consist of T/F, multiple choice, short answer, and pseudocode questions. You cannot use a calculator.</p>
  • <hr />
  • <p>After the exam, we will learn JavaScript. It should be fun!!</p>

Slide 16: Heading Example

  • <h1>This is heading 1</h1>
  • <h2>This is heading 2</h2>
  • <h3>This is heading 3</h3>
  • <h4>This is heading 4</h4>
  • <h5>This is heading 5</h5>
  • <h6>This is heading 6</h6>

Slide 17: Comment Example

  • <!-- This is just some sample html to illustrate the use of a comment -->
  • <p>Here is my paragraph.</p>

Slide 18: Ordered List Example

  • <ol> <li>Put your name and SSN on the front page.</li>
    <li>Answer questions 1-10 on page 1.</li>
    <li>Answer questions 11-20 on page 2.</li>
    <li>Answer questions 21-25 on page 3.</li>
    <li>Staple all pages together.</li> </ol>

Slide 19: Unordered List Example

  • <ul> <li>Put your name and SSN on the front page.</li>
    <li>Answer questions 1-10 on page 1.</li>
    <li>Answer questions 11-20 on page 2.</li>
    <li>Answer questions 21-25 on page 3.</li>
    <li>Staple all pages together.</li> </ul>

Slide 20: Link Example

  • <a href="http://www.csee.umbc.edu/~jtang/cmsc104">JTang's CMSC104 Page</a>

Slide 21: Image Example

  • <img src="logo.png" alt="UMBC logo" />

Slide 22: HTML Validation

  • HTML Validation is the process of ensuring that your HTML code adheres to the rules set by the W3C (World Wide Web Consortium).
  • Use the W3C Markup Validation Service to check your HTML code for errors: <a href="http://validator.w3.org/">validator.w3.org</a>

Slide 23: Summary

  • HTML is the language used to create web pages.
  • The web and the internet are not the same thing.
  • HTML documents are made up of tags that define the structure and content of the page.
  • Use the W3C Markup Validation Service to check your HTML code for errors.

CONGRATULATIONS