Đang tải... (xem toàn văn)
Tài liệu học HTML cơ bản dành cho lập trình viên học lại từ đầuKhi bắt đầu làm quen với lập trình web thì HTML chính là nội dung đầu tiên mà bạn phải học, sau đó bạn sẽ kết hợp với CSS để tạo ra những sản phảm rất là độc đáo. Nghe nói thì hay nhưng bạn mới học nên có lẽ hơi mơ hồ phải không nào :D Ok trong serie này ta sẽ cùng nhau khám phá nhé.
Session Introduction to HTML Working with HTML Elements Objectives: At the end of this session, you will be able to: Write simple HTML documents Use Hyperlinks Use tag Use special characters in HTML Use Basic Tags Insert Images The steps given in this session are detailed, comprehensive and carefully thought through This has been done so that the learning objectives are met and the understanding of the tool is complete Please follow the steps carefully In order to execute the programs follow the steps given below: Create a folder BDWS under C:\Temp, then create a folder Session1 in BDWS and save all the html files in this folder only Invoke Textpad application by clicking on the “Start” button and then “Programs\Text Editor” Use Textpad to write all html files Use Internet Explorer or Firefox to display all html files Part I: Do workshop in CD Part II: Example 1: An HTML code to illustrate an anchor tag First Linked Document To Open the new Document Click here Note: Before you run the above code, the file “test.html”, must exist It has the following contents (type these contents in a new Textpad file and save the file as “Test.html” in the folder “Session1”): A sample HTML Document My First Heading My first paragraph The syntax is: Click here It will create “Click here” as the hyperlink and on clicking this link it will take you to the page “Test.htm” Figure 1.1 a: Output of Example (before clicking on the link) Figure 1.1 b: Output of Example (after clicking on the link) Example 2: Scrolling to a location in the same document In the code given below four anchor references are defined as follows: Overview Benefits Features Technical Specifications Linking in the Same Document HUBS DETAILS Overview Benefits Features Technical Specifications Overview BayStack SNMP, Advanced, and SA 10Base-T Stackable Hubs from Bay Networks offer simple, scable solutions for supporting small and growing Ethernet networks Benefits Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple and cost-effective method for starting and growing Ethernet networks Features The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play solutions for small and growing Ethernet net-work environments Technical Specifications Technical Specifications for the BayStack 10BASE-T Hubs are shown in Table Figure 1.2: Output of Example Example 3: Using Special Characters in the HTML document Learning HTML If A > B Then A = A - 1 If A < B Then A = A + 1 Figure 1.3: Output of Example Example 4: Using Element Using META Element This page is refreshed after every seconds This page supports Unicode When the above page (Example4.htm) is displayed in the browser, notice the status bar The page gets refreshed after every seconds Figure 1.4: Output of Example Example 5: HTML code to incorporate Font tag, Break tag, Paragraph tag and its attributes HTML Code to Incorporate Different Tags To specify the beginning of the paragraph and the end of paragraph, <P> and </P> tag is used. The paragraph tag displays a blank line both on the top and the bottom of the paragraph . Figure 1.5: Output of Example Example 6: Write HTML code to right align a block of text using DIV tag Using DIV Tag Aligning a Block of Content to the Right You can use a DIV tag to align a block of content to the right The content can include anything you like, including tables, images, lists, and so on Note, however, that right-aligned lists often not look very neat Figure 1.6: Output of Example Example 7: Write HTML code to incorporate all the text-formatting tags Using Text Formatting This Is My th Program Using HTML H2O Is The Chemical Name For Water * ********* ********* * * * * * * * ********* ********* * * * * * * * ********* ********* This Text Will Appear With Strike Effect Figure 1.7: Output of Example Example 8: To insert an image into HTML document Inserting Images Inserting Images Create a link of an image Figure 1.8: Output of Example 10 Part III: Try It Yourself Write a web page that contains description of your family and also of your pets Clicking the link “Describe Family” should take you to the description of the family Clicking the link “Describe Pet” should take you to the description of your pet Hint: Use the anchor and paragraph elements Write the HTML statements that would give the following line on a web page For more information, please send an e-mail to me, abc@google.com Hint: Put the following statement in the section of the HTML file abc@google.com Write HTML code to display the following text using superscripts The Value of to the power of is: 23 = Write HTML code to display the following text using subscripts The Value of Log to the base 10 is: Log10 = Write HTML code to insert an image into the web page Align the image with the description of the image Do practical assignments in CD 11 [...]... elements 2 Write the HTML statements that would give the following line on a web page For more information, please send an e-mail to me, abc@google.com Hint: Put the following statement in the section of the HTML file abc@google.com 5 Write HTML code to display the following text using superscripts The Value of 2 to the power of 3 is: 23 = 8 6 Write HTML code to display... the following text using superscripts The Value of 2 to the power of 3 is: 23 = 8 6 Write HTML code to display the following text using subscripts The Value of Log to the base 10 is: Log10 = 1 7 Write HTML code to insert an image into the web page Align the image with the description of the image 8 Do practical assignments in CD 11