JimYuan's Blog

Sharing the things I learned

0%

IntroToTheWeb_Section_2

Posted on Edited on

Introduction to HTML

HTML is a Markup language

HTML was created to help describe the structure of the acedemic research papars and share they across the very early internet.

The goal of HTML is to take the text content and somehow mark it up with some structures.

HTML Elements

To write HTML, we pick from a set of standard Elements that all browsers recognize

Common Elmements includes:

1
2
3
4
- <p> element: represent a paragraph of text
- <h1> element: represents the main header on the page
- <img> element: embeds an image
- <form> element: represents a form

Our Very First HTML Page

  1. Save your HTML file with the file extension [.html]
  2. After that you should be able view your web in local browser
1
2
DEVELOPING ON OMNIVERSE
NVIDIA Omniverse™ is a powerful multi-GPU real-time simulation and collaboration platform for 3D production pipelines based on Pixar's Universal Scene Description and NVIDIA RTX™technology.
1
2
DEVELOPING ON OMNIVERSE
NVIDIA <b>Omniverse™</b> is a powerful multi-GPU real-time simulation and collaboration platform for 3D production pipelines based on Pixar's Universal Scene Description and NVIDIA RTX™technology.

Developer Resources

https://developer.mozilla.org/en-US/

HTML Tags

Fast Way to Type HTML Tags

For example:

1
<b></b>

Press ‘b’ then ‘Tab’ to autocomplete

Paragraph Tag

1
<p>Something in between</p>
  • Take a block of space

Heading Elements

1
2
3
4
5
6
- <h1></h1>
- <h2></h2>
- <h3></h3>
- <h4></h4>
- <h5></h5>
- <h6></h6>

Chrome Inspector

Right click on the webpage select “Chrome Inspector” and then we can see the html instruction of the current showing web.

HTML Boilerplate

HTML SKELETON

We write our HTML in a standard “skeleton”

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>  
    <head>
        <title> 
            JimYuan
        </title>
    </head>
    <body>
            All the webpage contains
    </body>
</html>
  • !DOCTYPE html is weird by not having the closing tab
  • Html element should have inside
    • head tag
    • body tag
  • Title is for the webpage name/ tab-name(Google use this tag element in the head to create the link in the search result)

Short cut for generate this skeleton

! + “Tab”

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Reference Resources

VSCode Tip: Auto-format

Ctrl + Shift + P + (searching “format”)

List Element

1
2
3
- unordered list <ul></ul>
- ordered list <ol></ol>
- list item <li></li>

The Anchor Element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

1
2
3
4
5
6
7
<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

Image

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

1
<img src="picture_location" alt="Some description about the pictue">
  • note that image tag don’t have closing tag

The alt attribute holds a text description of the image, which isn’t mandatory but is incredibly useful for accessibility.

Comment

1
<!-- comment -->

The Shortcut In VScode

Toggle line comment