Deep Hole Rat Trap Using Big Plastic 30L
For more infomation >> Designopro, le logiciel de création graphique simple et puissant ! - Duration: 11:41. 
For more infomation >> build # 1 (simple house) - Duration: 1:42. 
For more infomation >> Simple beer bottle craft ideas !! - Duration: 6:10. 
I am using Notepad++ in this video. You may use any editor of your choice
The doctype isn't an actual tag, but it needs to be at start at every HTML page to tell browser which version of HTML you're using (HTML5 in this example)
The html tag is always the first tag in the page. We will begin with the code skeleton of an HTML5 web page.
The head contains "meta" information about the page, information that the browser needs before rendering it.
meta tag specfiies the character encoding of the web page
The title tag specifies the title of the web page (displayed in the title bar)
Each tag has a "start tag" and an "end tag". For example, <title>...</title> The body contains the content of the page.
The body selector refers to the <body> tag. You can use it to change formatting for the contents of the entire web page.
Each tag has a "start tag" and an "end tag". For example, <title>...</title> The body contains the content of the page.
To save your file: File menu > Save As... Enter the file name ("practice1" in this example)
Change the "Save as type" to Hyper Text Markup Language file
It is VERY IMPORTANT that you save the file as an HTML file!
Click "Save"
Notice the color changes in your code (color coding is a nice feature in Notepad++!)
Go to the Run menu. Select Launch in <browser of your choice> to show the page in a browser
Note the title is displayed at the top of the tab. The body is shown in the web page itself.
Next, we will practice using headings and paragraphs.
Add a h1 heading with your name. Add your favorite quote to the page using a blockquote element.
You can enable Word Wrap by going to the View menu > Word wrap. Add a h2 heading "About Me".
Add a paragraph element containing a paragraph introducing yourself.
Remember to save your web page before you test it again in a browser. Go back to the browser window where you
have your web page opened (or reopened the web page in a web browser if necessary).
Refresh the web page (F5 is the typical keyboard shortcut). Take a look and make sure everything
looks as expected.
Next, we will use a list and phrase elements. Let's add to the body of the HTML
document.
Add a h2 heading "My Favorite Things".
Add an unordered list of your favorite food, hobbies, etc. The <ul> tag stands for unordered list.
Use the <li> list item tag to add an item to the list.
The <strong> tag defines a phrase as important (typically displayed in bold)
The <em> tag renders a phrase as emphasized (typically displayed in italics)
Remember to save your web page before testing it again in a browser.
Refresh your web page in the browser. Check that everything looks good.
Next, we will add an image to our web page. Browse to a web page that contains an image that you would like to insert into
your web page.
I will use this image on the Wikipedia page for Calvin and Hobbes.
Right-click the image, and then use the command corresponding to Save image as...
Save the image in the SAME FOLDER AS YOUR HTML FILE. This is very important.
I will save the file with a relatively simple name (all lowercase in one word)
Here I will double-check that the file is downloaded properly.
To see the file properties, right-click the file, then choose Properties. This shows various properties of the file.
Go to the Details tab and see the full filename. Here I see that the image file name is
hobbes.png.
Make sure you make a note of what yours is.
In the HTML document, we will use the <img> tag to add an inline image.
Within the <img> tag, use the src attribute to specify the image file name. The file name should be enclosed in doublequotes.
Since the image is stored in the same folder as the HTML file, you can simply input the file name in the src attribute.
For the alt attribute, provide a short description of your image for accessibility purposes.
The value of the alt attribute should be enclosed in doublequotes.
Save your web page before testing it in a browser.
Refresh your page in a browser. Make sure that the image is displayed properly.
If your image is not displayed, check that the file name is entered correctly in the <img> tag and that your HTML file is
saved.
The page is quite plain right now. Let's use CSS to change the formatting of the page.
Within the <head> section, add the <style> tag.
Curly braces { } are used to enclose CSS style rules. The color property refers to the text color.
There are different ways to specify colors for web pages. Let's find a web resource for web color codes.
Google "HTML color codes"
This web site is http://html-color-codes.info/ This color chart utility allows me pick a color from the palette and obtain the color
code easily
Note the color code here that starts with the # symbol (there are six hexadecimal digits). Copy the code.
Use the code for the color property (place it after color: Put a semicolor after each rule.
The background-color property refers to the background color of the element.
Most common color names are recognized in CSS. For example, black, white, red, green, yellow, blue...
Or experiment with different color picker utilities on the Web.
The font-family property allows you to specify the font face.
Providing a list of names allow the subsequent fonts to be used as fallback in case the first font is not available on the
user's system. You can provide a list of font names, from the most specific to the generic font family
Most common font names are available.
You can also google "web fonts" or "HTML fonts" for web resources that list font names.
For example, this web page (http://www.w3schools.com/cssref/css_websafe_fonts.asp) shows CSS web safe
fonts.
The width property changes the width of the element (in this case the width of the body of the web page).
The margin property controls the spacing between an element and its neighbor.
margin: 5em auto --> 5 spaces top and bottom, and center the element horizontally.
Remember to save your page and then test it in a browser.
Note the dramatic change! CSS makes it very easy to style web page! Congratulations! You have created your first
HTML5 web page!
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét