ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML_codecademy] Elements and Structure
      Language/HTML&CSS 2022. 8. 11. 18:15

      Learn about HTML elements and structure, the building blocks of websites.

      1.  Introduction to HTML

      <body>
  <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" alt="bear video" width="320" height="240" controls>
    Video not supported
    </video>
  </div>
</body>

      Congratulations on completing the first lesson of HTML! You are well on your way to becoming a skilled web developer.

      Let’s review what you’ve learned so far:

      • HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
      • Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
      • HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
      • Any visible content should be placed within the opening and closing <body> tags.
      • Headings and sub-headings, <h1> to <h6> tags, are used to provide titles for sections of content.
      • <p>, <span> and <div> tags specify text or blocks.
      • The <em> and <strong> tags are used to emphasize text.
      • Line breaks are created with the <br> tag.
      • Ordered lists (<ol>) are numbered and unordered lists (<ul>) are bulleted.
      • Images (<img>) and videos (<video>) can be added by linking to an existing source.

      Here are a few more resources to add to your toolkit:

      Make sure to bookmark these links so you have them at your disposal.

      In the next lesson, we’ll take the content that you’ve added to this website and transform it into an HTML document that’s ready to go on the web.

      2.  HTML Document Standard

      <!DOCTYPE html>
<html>

<head>
  <title>Brown Bears</title>
</head>

<body>
  <nav>
    <a href="./index.html">Brown Bear</a>
    <a href="./aboutme.html">About Me</a>
  </nav>
  <h1>The Brown Bear</h1>
  <nav>
    <ul>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#habitat">Habitat</a></li>
      <li><a href="#media">Media</a></li>
    </ul>
  </nav>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
      Atlas bear and the Himalayan brown bear.</p>
    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" />
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
  </div>
</body>

</html>

      You now know all of the basic elements and set-up you need to structure an HTML page and add different types of content. With the help of CSS, very soon you’ll be creating beautiful websites!

      While some tags have a very specific purpose, such as image and video tags, most tags are used to describe the content that they surround, which helps us modify and style our content later. There are seemingly infinite numbers of tags to use (many more than we’ve taught). Knowing when to use each one is based on how you want to describe the content of your HTML. Descriptive, well-chosen tags are one key to high-quality web development. A full list of available HTML tags can be found in Mozilla documentation.

      Let’s review what you’ve learned this lesson:

      1. The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
      2. The <html> element will contain all of your HTML code.
      3. Information about the web page, like the title, belongs within the <head> of the page.
      4. You can add a title to your web page by using the <title> element, inside of the head.
      5. A webpage’s title appears in a browser’s tab.
      6. Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.
      7. You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
      8. Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
      9. Indentation also helps make code easier to read. It makes parent-child relationships visible.
      10. Comments are written in HTML using the following syntax: <!-- comment -->.

      Take some time to edit the workspace you created and observe how it changes!

      'Language > HTML&CSS' 카테고리의 다른 글

      [HTML_codecademy] Forms  (0) 2022.08.11
      [HTML_codecademy] Tables  (0) 2022.08.11
      CSS_생활코딩 : BOX 개념, GRID 개념, 반응형 웹  (0) 2022.07.25
      CSS_생활코딩 : 웹페이지에 CSS를 삽입하는 2가지 방법  (0) 2022.07.25
      HTML_생활코딩 : 동영상 삽입, 댓글 기능, 채팅 기능, 방문자 분석기  (0) 2022.07.21

      관련글 관련글 더보기

      댓글

    티스토리툴바