1.1 The Basic of the Web and HTML

World Wide Web

  • A collection of HTML(Hypertext Markup Languages) documents

HTML

  • HyperText Markup Language

HTML Markup

  • element
    • opening tag
    • closing tag

Internet

Tag

  • 在 HTML formatting 可以找到，許多常見 tag，例如
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text

  • <sup> - Superscript text

  • 如果你忘記加 closing tag，在opening tag後的字都會變斜體。

HTML Attribute

  • 介紹 tag 的 attribute 與 value

Images Tag

  • 以 image tag 當例子，src 與 alt 是 attributes，url 跟 text 是 value。

  • alt attribute

    • alt 的全稱是 alternate，當圖片連結失效的時候，就會顯示 alt 內的設定的字串。

  • void tag 是指一個 tag 並沒有 content，他不需要一個 closing tag

  • break 是換行的意思

Whitespace

  • 空格與換行的使用
    • 在 html 裡就算你空很多空格，但實際上只有一個
    • <p> tag 的 p 是 paragraph, 段落的意思。

範例1

Inline/Block Element

  • block element 像 <div>、<p> 這些 tag。會創造有長和寬的空間，他會是一整塊跟畫面的寬度相同的空間，且從左開始。
  • inline element 則不會是一整塊與畫面一樣寬的區塊，他的寬度會依照需要多少空間而不同。像 <img>、<span>。

Quiz

  • 哪些 elements 是 inline element?

HTML Documents

  • doctype
  • html, head, body

Review

First, recall the two main topics covered in this lesson.

  1. Overview of the Internet: You were shown the big-picture view of how the internet works and were introduced to terms likeservers,browsers,the internet, andHTTP.

  2. Introduction to HTML: You were introduced to HTML tags (like<b>,<p>, and<em>) and saw how even though these tags aren't visible to users of a web page, they still carry meaning thatismeaningful to web browsers.

What to take away from this lesson.

The five most important things to take from this lesson are the following:

1 - What a Web Page is

A web page is a text document written in a language called HTML. Web browsers read these documents, and then interpret and display them.

2 - How Coding Works

Coding happens when programmers write text in a language that a computer can understand. The computer can then follow the instructions the programmer wrote. For example, the computer might do this by making text like this:

I'm <b>learning</b> to code!

look like this:

I'm learning to code!

3 - Computers are Stupid

Programmers need to write exactly the way a computer understands (also known as writing with correct "syntax").

For example, if you forget to close a<b>tag, the computer won't be able to figure out what you had intended to make bold. This "stupidity" can be very frustrating, but it also gives programmers incredible power: if you know how to talk to a computer than you can tell it to do anything you want.

4 - Programmers Can't Remember Everything

There are too many details to keep everything in your head. And that's okay. If you forget how to make text italic in HTML, you can always just look it up.

5 - Basic HTML Vocabulary

You will be using HTML in the next few lessons, so it will be helpful if you're comfortable with the jargon.

  • Tag: An HTML tag is always contained within angled brackets. Most tags have an opening tag (<p>for example) and a closing tag, (</p>). Some tags (called "void" tags) do not require a closing tag (like the<br>tag).

  • Element: An HTML element refers to everything within a set of opening and closing tags.

Attribute: This is a property of an HTML element. For example, to set the href attribute of an anchor tag to the Udacity URL, you would write<a href="www.udacity.com">

results matching ""

    No results matching ""