OIM3690 - Web Technologies

contain

Introducing HTML

What is HTML?

  • HTML = Hyper Text Markup Language
    • Hyper Text: the content of a web page
    • Markup: tags used to define how content is to be displayed
    • Language: syntax and vocabulary associated with marking-up

Standard HTML5 Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title Goes Here</title>  
  <style>
    /* Your styles go here */
  </style>
  <script>
    // Your JavaScript code goes here. 
  </script>
</head>
<body>
  <!-- Your HTML code goes here. -->
</body>
</html>

HTML Tags

  <body>
    <h1>Welcome to OIM 3690</h1>
    <p>This is the first paragraph that is the least bit interesting</p>
    <p>
      This is the second paragraph that is even less interesting than the first.
      It is longer than the first paragraph. It also shows how the paragraph is
      formatted on the page.
    </p>
  </body>
  • <h1>: section heading
  • <p>: paragraph

HTML Headings

<h1>Big Text</h1>
<h2>Relatively smaller text</h2>
<h3>Even smaller text</h3>
<h4>Well, you</h4>
<h5>get the</h5>
<h6>picture</h6>
  • Most tags come in pairs – a opening tag and a closing tag
  • Tags are enclosed in tag markers (< and >)
  • Closing tags include a forward slash /

More Basic Tags

More Tags

  • <div> and </div> - helps divide a page into sections for formatting
  • <span> and </span> - helps format multiple occurrences of a specific word or phrase the same way
  • Will use more of these when dealing with formatting and CSS
  • Comments
      <!-- Your comment goes here -->
    • for use by the web designer (you)
    • will not be displayed
    • Check out homepage of the new White House website and find out the first comment in the html file.

HTML Entity

  • For HTML5, the default character encoding is UTF-8
  • To use "special" characters we need additional codes. For example:
    • > (greater than) is done using &gt;
    • < (less than) is done using &lt;
    • & (ampersand) is done using &amp;
    • " (quotation) is done using &quot;
  • Reference: MDN, w3schools
  • Question:
    • How do we add a lot of spaces?

Exercise - Creating Your First Web Page

  1. Create a new file, ex01.html, in the WebTech folder using VS Code
  2. Change title to "Web Technologies - Your Name"
  3. Add a heading to the page "All About Your Name"
  4. Add two paragraphs:
    1. One about why you chose Babson and/or your aspirations after graduation.
    2. One about your favorite hobby/sport.
  5. Insert a horizontal line between the heading and the first paragraph and another one at the end of the second paragraph.
  6. Use appropriate tags (e.g., <strong> or <em>) to highlight your hobby/sport name.

Exercise - Viewing and Submitting

  • Save the file.
  • Preview the webpage in a browser - try both methods:
    • Without Live Server: Right-click the file name in VS Code, select "Reveal in File Explorer", and open the file in your browser.
    • With Live Server: Click the "Go Live" button in VS Code to open the file in your browser.
  • Commit and Push to GitHub
    • Use GitHub Desktop or the GitHub extension in VS Code to commit and push your repository to GitHub.com.

global styles