It’s learning abstract from Head First HTML and CSS, 2nd Edition.

# Relative Path(HT)

A relative path is a link that points to other files on your website relative to the web page you’re linking from.

warning

Blank space isn’t permitted in the names of files and folders.

## for .html file

 1  detailed directions
• href means hypertextreference.

• the directions.html file must be in the same parent file as the .html file.

• use dot dot .. to trace the parent file.

• if you want to go up two folders, you’d type ../.. and so on.

• the limit to how far up you can go – the root of your website.

• in web pages you always use / (forward slash). Don’t use \ (backslash).

 1   Back to the Lounge

## for images

 1  

warning

In blogdown/hugo, the root file is public. And the posts are in public/post.

# Web Page Construction

## citation/quotation

Some browsers use double quotes as the default style of citation, some use italics, and some use nothing at all. The only way to really determine how they’ll look is to style them yourself.

### <q>

• The difference between <q> and double quotation marks "".

• <q> is applied in inline citation, as a part of one paragraph.

### <blockquote>

• <blockquote> is applied in block citation, as another paragraph, which has the indent automatically.

• <q> can be inserted in <blockquote>.

• Linebreak elements <br>(or<br/>) can be used in <blockquote>.

## void element

Elements that don’t have any content by design are called void elements. When you need to use a void element, like <br> or <img>, you only use an opening tag. This is a convenient shorthand that reduces the amount of markup in your HTML.

## list

Put each list item in an <li> element. eg.

 1 2 3 4 5 6  
• Walla Walla, WA
• Magic City, ID
• Bountiful, UT
• Last Chance, CO
• Truth or Consequences, NM
• Why, AZ
• 

• ordered list

Enclose the list items with the <ol> element. eg.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26  
1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ
1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ
1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ

1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ
1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ
1. Walla Walla, WA
2. Magic City, ID
3. Bountiful, UT
4. Last Chance, CO
5. Truth or Consequences, NM
6. Why, AZ

• unordered list

Enclose the list items with the <ul> element.

 1 2 3 4 5 6 7 8  
• Walla Walla, WA
• Magic City, ID
• Bountiful, UT
• Last Chance, CO
• Truth or Consequences, NM
• Why, AZ

• Walla Walla, WA
• Magic City, ID
• Bountiful, UT
• Last Chance, CO
• Truth or Consequences, NM
• Why, AZ
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20  
• 苹果
• 香蕉
• 柠檬
• 桔子
• 苹果
• 香蕉
• 柠檬
• 桔子
• 苹果
• 香蕉
• 柠檬
• 桔子

• 苹果
• 香蕉
• 柠檬
• 桔子
• 苹果
• 香蕉
• 柠檬
• 桔子
• 苹果
• 香蕉
• 柠檬
• 桔子

• nested list
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15  
• 咖啡
• 红茶
• 绿茶
• 中国茶
• 非洲茶
• 牛奶

• 咖啡
• 红茶
• 绿茶
• 中国茶
• 非洲茶
• 牛奶
  1 2 3 4 5 6 7 8 9 10 11 12  
1. Charge Segway
2. Pack for trip
• cell phone
• iPod
• digital camera
• a protein bar
3. Call mom

1. Charge Segway
2. Pack for trip
• cell phone
• iPod
• digital camera
• a protein bar
3. Call mom

• definition list

Each item in the list has definition terms <dt> and definition description <dd>.

 1 2 3 4 5 6 7 8 9  
Burma Shave Signs
Road signs common in the U.S. in the 1920s and 1930s advertising shaving products.
Route 66
Most famous road in the U.S. highway system.

Burma Shave Signs
Road signs common in the U.S. in the 1920s and 1930s advertising shaving products.
Route 66
Most famous road in the U.S. highway system.

## character entity

for any character that is considered “special” or that you’d like to use in your web page, but that may not be a typeable character in your editor (like a copyright symbol), you just look up the abbreviation and then type it into your HTML. For example, the > character’s abbreviation is &gt; and the < character’s is &lt;.

If you’d like to have an & in your HTML content, use the character entity &amp; instead of the & character itself.

 1   The <html> element rocks. And &.

The <html> element rocks. And &.

And other common ones are available at: http://www.w3schools.com/tags/ref_entities.asp. Or, for a more exhaustive list, use this URL: http://www.unicode.org/charts/.

## id

Back to top(the same web page). And before this, you should know the id of each point you want to arrive.

Insert audio in website? You can use the two kind of links:

 1 2   御龙将军（uncover） or [御龙将军（cover）](https://hoas.xyz/post/terrylin/#索引).

If you give the name _blank to the targets in all your <a> elements, then each link will open in a new blank window. However, this is a good question because it brings up an important point: you don’t actually have to name your target _blank. If you give it another name, say, coffee, then all links with the target name coffee will open in the same window. The reason is that when you give your target a specific name, like coffee, you are really naming the new window that will be used to display the page at the link. _blank is a special case that tells the browser to always use a new window.

## image

the <img> element is an inline element. To make links out of images, for example:

 1 2 3 4   

In this example the link fails because fancybox = true.

A width of less than 800 pixels is a good rule of thumb for the size of photo images in a web page. And more details of different formats of images(JPEG,GIF,PNG) are in the book.

# Getting Serious with HTML

When the browser sees: <!doctype html>, it assumes you’re using standard HTML. No more getting all hung up on version numbers or where the standard is located. If you insert the <!doctype html> in the .html file, this page will be updated to HTML5.

## backwards compatibility

Backwards compatibility means that we can keep adding new stuff to HTML, and the browsers will (eventually) support this new stuff, but they’ll also keep supporting the old stuff. So the HTML pages you’re writing today will keep working, even after new features have been added later.

## the W3C validator

There are three ways you can check your HTML/web by using the W3C validator:

• If your page is on the Web, then you can type in the URL here(Validate by URI) and click the Check button, and the service will retrieve your HTML and check it.

• You can choose the second tab(Validate by File Upload), and upload a file from your computer. When you’ve selected the file, click Check, and the browser will upload the page for the service to check.

• Or, choose the third tab(Validate by direct input), and copy and paste your HTML into the form on that tab. Then click Check and the service will check your HTML.

## specify the character encoding

Luckily, the world has now standardized on the Unicode character encoding. With Unicode, we can represent all languages with one type of encoding. But, given there are other encodings out there, we still need to tell the browser we’re using Unicode (or another encoding of your choice). To specify Unicode for your web pages, you’ll need a <meta> tag in your HTML that looks like this:

<meta charset="utf-8">

The <meta> tag belongs in the <head> element and you shoudl add this line above any other elements in the <head> element. And “utf-8” is the version we use for web pages.

## alt attribute

• If your image is broken for some reason (say, your image server goes down, or your connection is really slow), the alt attribute will (in most browsers) show the alt text you’ve specified in place of the image.

• For vision-impaired users who are using a screen reader to read the page, the screen reader will read the alt text to the user, which helps them understand the page better.

# Interactive

## different inputs

One simple form:

 1 2 3 4 5 6 7 8 9  

Just type in your name (and click Submit) to enter the contest:
First name:
Last name:



Just type in your name (and click Submit) to enter the contest:
First name:
Last name:

What can go in a form?

• text input
 1   

• submit input
 1  

 1 2   

hot

not

• checkbox input
 1 2 3   

Salt

Pepper

Garlic

• textarea
 1  

Customer feedback:

• select&option
 1 2 3 4 5 6 7  

• number input
 1  

• range input
 1  

• color input
 1  

• date input
 1  

Date:

• email input
 1  

Email:

• tel input
 1  

Tel:

• url input
 1  

URL:

• reset
 1  

• file

• image

• hidden

## integrate

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78  

Type:

Whole bean
Ground

Number of bags:

Must arrive by date:

Extras:

PAY ATTENTION TO extras[]!

Include catalog with order

Ship to

Name:

City:

State:

Zip:

Phone:



Type:

Whole bean
Ground

Number of bags:

Must arrive by date:

Extras:

PAY ATTENTION TO extras[]!

Include catalog with order

Ship to

Name:

City:

State:

Zip:

Phone:

Reload the page, fill in the text inputs, and submit the form. When you do that, the browser will package up the data and send it to the URL in the action attribute, which is at starbuzzcoffee.com. And if you want your customers to get their form, you can set method to GET.

## extra elements

• fieldsheet
 1 2 3 4 5 6 7 8 9  
Condiments Salt
Pepper
Garlic

Condiments Salt
Pepper
Garlic
 1  

# Tabulate

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68   The cities I visited on my Segway'n USA travels
City Date Temperature Altitude Population Diner Rating
Walla Walla, WA June 15th 75 1,204 ft 29,686 4/5
Magic City, ID June 25th 74 5,312 ft 50 3/5
Bountiful, UT July 10th 91 4,226 ft 41,173 4/5
Last Chance, CO July 23rd 102 4,780 ft 265 3/5
Truth or Consequences, NM August 9th 93 4,242 ft 7,289 5/5
Why, AZ August 18th 104 860 ft 480 3/5
biubiubiu


The cities I visited on my Segway’n USA travels
City Date Temperature Altitude Population Diner Rating
Walla Walla, WA June 15th 75 1,204 ft 29,686 45
Magic City, ID June 25th 74 5,312 ft 50 35
Bountiful, UT July 10th 91 4,226 ft 41,173 45
Last Chance, CO July 23rd 102 4,780 ft 265 35
Truth or Consequences, NM August 9th 93 4,242 ft 7,289 55
Why, AZ August 18th 104 860 ft 480 35
biubiubiu