在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:learn-co-curriculum/phase-0-html-experiencing-html-lab开源软件地址:https://github.com/learn-co-curriculum/phase-0-html-experiencing-html-lab开源编程语言:JavaScript 100.0%开源软件介绍:Experiencing HTML LabLearning Goals
IntroductionHow do we go about writing text for the web? How is that different from the text that we write in a text file? We're going to experience for ourselves how these things are different in this lab. You don't need any prior knowledge of HTML for this lab. We're going to tell you what to type. Don't focus on specific commands or taking notes. Everything will be covered thoroughly later. Instead, the goal of this exercise is to feel the joy of editing a file and seeing the change "out there." NOTE: We don't expect you to know markup, content, source text, or rendered text yet. We'll be defining them in this lab. Getting StartedIf you haven't already, fork and clone this lesson into your local environment.
Navigate into its directory in the terminal, then run Create an Ordered HTML ListThink of a collection of things united by theme: Pokémon, Old-school MC's, Prime Ministers of New Zealand, Magical Beasts and Where to Find Them, etc. We're going to walk through how to create a list of things marked up with HTML. Create a Text File with ContentIn your terminal, while still inside of this labs directory, create a new file
called Below is a collection of plant names.
Copy and paste the plants into your
The material we typed into the file is called the content. It's the thing we're trying to communicate. Content as a List in a Text FileA problem with our content is that it doesn't explicitly state anywhere that it's a list. In the example, we see a list of plants. But a browser doesn't know what a "list" is. We need to help the browser know what a list is. The secret is to add "notes" or "breadcrumbs" to the content that tell the browser that it has list items and that these items "go together" in a list. To add these "notes" we surround the content with bits of markup, with bits of HTML. We will take the text content from our text file, paste it into a new HTML file and then we will add markup so that a browser "sees" a list. Let's write an HTML file! Text Inside an HTML FileNow we're going to create an HTML list together.
Once you've opened the file in the browser, you should see: As noted above, the browser doesn't know that items on new lines means "items in a list." Browsers ignore when HTML is split onto new lines. We cover why a little later in this README. Since the browser doesn't know we intend this to be a list and since browsers ignore when content is split onto different lines, it displays all the content on one line. Not what we wanted. A Text Not-Really-A-List Into a Real-HTML-ListREMEMBER: This lab will provide you what to type. Subsequent labs will deeply examine details of HTML markup. However, our goal here is to show how slight changes to markup can quickly alter the browser's display of content. If you're fuzzy on a detail that's fine. Marking-Up List ItemsOK, we've reached the critical moment. We're going to tell the browser that
these bits of letters represent list items. To do so we "wrap" each line
with <li>"Monstera deliciosa"</li>
<li>"Fiddle Leaf Fig"</li>
<li>"Pilea"</li>
<li>"Golden Pothos"</li>
<li>"Peace Lily"</li> Flip back to the viewing tab and refresh the page. You should see something like the following: AWESOME. In this step we added some HTML markup:
Again, you don't need to memorize these terms yet, but we want to help you develop an intuition for how these words are used. You will be using these terms when speaking with other developers and HTML authors. It may not seem like we did much work, but the idea of a method for "marking up" content and linking it is the foundation of the web. It's what made Tim Berners-Lee's reputation. And you just experienced Sir Tim's great insight. AWESOME. Let's work with additional HTML tags to see how we tweak our HTML a bit more. Let's tell the browser "Hey! These list items, they go together!" Indicating that List Items Are ConnectedWrap the entire set of <ol>
<li>"Monstera deliciosa"</li>
<li>"Fiddle Leaf Fig"</li>
<li>"Pilea"</li>
<li>"Golden Pothos"</li>
<li>"Peace Lily"</li>
</ol> Save the file and refresh the viewing tab. It should display: We told the browser that this set of list items that we "wrapped" in the ordered list tag go together as a list. Because we told the browser that the list is ordered it decided to be helpful and put numbers next to the list items for us. Wrapping and IndentationWith all these angle-brackets of markup and content mixed together, HTML authors like to use indentation to make HTML easier to read. Here's how most HTML authors would expect our code from the previous section to be arranged: <ol>
<li>"Monstera deliciosa"</li>
<li>"Fiddle Leaf Fig"</li>
<li>"Pilea"</li>
<li>"Golden Pothos"</li>
<li>"Peace Lily"</li>
</ol> Update your document. Save it and refresh your viewing tab. Remember earlier when the browser ignored that content was on separate lines? Cleaning up your code requires splitting lines, adding spaces, and adding tabs. Browsers ignore those characters that humans use to make their HTML reader-friendly. Create an Unordered HTML ListLet's change our ordered list to be unordered. If Here we return to a "bulleted" unordered list. ASIDE: If you've been following along closely, you might be wondering, if we
didn't have a Add a Description ParagraphLet's introduce our list by adding some background: <p>Some of my favorite plants!</p>
<ul>
<li>"Monstera deliciosa"</li>
<li>"Fiddle Leaf Fig"</li>
<li>"Pilea"</li>
<li>"Golden Pothos"</li>
<li>"Peace Lily"</li>
</ul> Take a look at your "rendered page" and verify the result is to your liking. Put a Header on ItLastly, let's put a "heading" on the top of our document. Add an <h1>My Plant List</h1> Here's the full example code: <h1>My Plant List</h1>
<p>Some of my favorite plants!</p>
<ul>
<li>"Monstera deliciosa"</li>
<li>"Fiddle Leaf Fig"</li>
<li>"Pilea"</li>
<li>"Golden Pothos"</li>
<li>"Peace Lily"</li>
</ul> When you're done, it is time to run this assignment's tests. Make sure that you
have your HTML content in a file called ConclusionIn this lab, you have done the job of an HTML author. You receive raw content, you mark it up to create source text. You test, tweak and adjust your source text until the rendered text displayed in the browser is to your liking. In upcoming lessons, we will learn additional tags which provide us more ways to describe our content. We might be starting with lists today, but soon we'll be using HTML in even more exciting ways! Welcome to the community of web page creators! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论