【CS006】Computer science

本文指导如何在Cloud9中创建HTML文件index.html,包括添加基本HTML结构(<!DOCTYPEhtml>,<html>,<head>,<body>,<header>,<main>,<section>,<footer>),并填写关于个人介绍、家乡、兴趣爱好和UCR的相关内容,最终生成一个简单的个人网页。
摘要由CSDN通过智能技术生成

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

  1. In your lab 2 folder (for example, kflynn001_lab2_section001), create an HTML file named index.html. The index.html file is commonly used to represent the home page of a website.
  2. Open index.html in edit mode in Cloud9.
  3. Add <!DOCTYPE html> on line 1 in index.html. <!DOCTYPE html>, the Document Type Declaration, specifies to the browser that the document is written in HTML5.
  4. Add <html></html> on line 2 of index.html.
  5. Place your cursor in between the opening and closing html tags: <html> here</html>. Then press the return key once, moving the closing </html> tag down two lines.  The <html> tag marks the beginning of the HTML document.
  6. Add <head></head> inside the html element: <html>here</html>.
  7. Place your cursor in between the opening and closing head tags: <head>here</head>. Then press the return key once, moving the closing </head> tag down two lines in the code.
  8. The <head> tag marks the document head. The head element contains information that describes the web page document. It also includes information browsers will use to properly display the web page.

  9. Add <body></body> inside the html element after the head element, <html>after head element here</html>. The body element should be placed after the entire head element, that is after closing </head> tag and before closing </html> tag.
  10. Place your cursor in between the opening and closing body tags: <body>here</body>. Then press the return key once, moving the closing </body> tag down two lines in the code.
  11. Add (copy-and-paste the entire line of code) the following <meta> element with the given attribute values inside <head>here</head>.
  12. If you correctly followed the directions for steps 1-10, the index.html source code should appear as follows.
  1. Add <header></header> inside <body>here</body>.  The header element is a structural element that contains content such as a navigation menu.

Add <main></main> inside the body element: <body>after header element here</body>. The header and main elements will be in sequence in the document, i.e. header element occurs first

  1. followed by the main element. The main element contains information considered the central part of the webpage content.
  2. Add four <section></section> elements inside <main>here</main>. Using your cursor and the return key, add a new blank line between each opening <section> tag and closing </section> tag. Once done there should be 4 section elements in a row.
  3. Add <footer></footer> after the closing tag for </main> element and before the closing tag </body>.
  4. Place your cursor in between the opening and closing footer tags: <footer>here</footer>. Then press the return key once, moving the closing </footer> tag down two lines in the code.
  5. If you correctly followed the directions for steps 1-6, the index.html source code should appear as in the image above.

 

  1. Add a paragraph element,<p></p>, inside the first section element, <section>here</section>.   

In the paragraph element from the previous step, write a single paragraph about yourself. Start the paragraph with the text About Me: in bold. We could use the <b> element to make the text bold, but to make our website more accessible we will use the <strong> element. The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. For

  1. users who are visually impaired or use text-to-speech software to navigate and read webpages, <strong> indicates this content is important: which content about you is. Read more about its use here.
  2. To complete the paragraph content, at a minimum, you should answer the following questions. The answers to which will form the paragraph’s content.

What is your name, major, year in college? What year and quarter did you start at UCR? Where did you attend high school? What are your plans after you graduate career-wise? Phrase each plan as a positive affirmation , examples are: I will enter graduate school in ______. I am going to attend law school, then enter criminal law. When I earn my teaching credential, I will  become a HS teacher. I will enter the industry as a(n) _______. I will work as a Congressional aid, then run for political office. I am going to work as a social worker in LA County. Points will be deducted for not using positive affirmation. Avoid “want to” or “hope to” or “if...then”.

  1. Add a heading level 2 element, <h2>Hometown</h2>,  inside the second section element, <section>here</section>.  
  2. Add one paragraph element, <p></p>, this section element: <section>here after h2 element</section>. Next, write one paragraph of content about where you grew up, your hometown or a recent place you call home.

What did you love the most about this place? Be specific. What were some of your fondest memories of this place? What was the best of the food and culture like? Were there particular seasons of the year that you enjoyed the most and why? What were some of the cool places you would go or experience growing up?

  1. Add a heading level 2 element, <h2>Interests and Hobbies</h2>, inside the third section element: <section>here</section>.
  2. Add one paragraph element, <p></p>, this section element: <section>here after h2 element</section>. Next, write one paragraph of content about your favorite hobbies or interests you have.

Examples are: sport you love to play and/or follow or a musical instrument you learned to play. Do you often hike or spend time in the great outdoors? Do you love to cook? Is there a particular cuisine you are an expert at cooking (eating :-))? Any topic you choose that you are passionate about will work for this section.

  1. Add a heading level 2 element, <h2>UCR</h2>, inside the fourth section element: <section>here</section>.

Add one <p></p> element to this section element: <section>here after h2 element</section>. Add one paragraph of content about your time at UCR. If you have not yet been on campus, do some

  1. research online and consider what activities or experiences you look forward to once you get to UCR.

What interesting places or activities have you added to your repertoire or want to experience as a Highlander? Describe several. Examples would be: hiking to the C, eating Pho' with friends, snowboarding, visiting the Botanical Gardens, trips to the beach, nights out dancing in LA with friends, etc.

  1. Save index.html and open in Preview Mode in Cloud9. Your webpage should look like the example web page (next page of this document), but with different text for the paragraphs in About Me: My Hometown, Interests and Hobbies, and UC Riverside.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值