2020/html (codecademy)

Introduction to HTML

bNayC 2020. 4. 10. 02:55

 

HTML is the skeleton of all web pages.

HTML provides structure to the content appearing on a website, such as images, text, or videos.

In HTML, the computer can interpret raw text that is wrapped in HTML elements.

Learning HTML is the first step in creating websites.

 

ㅡ HyperText = hyperlinks

 

 

HTML is composed of elements. These elements structure the webpage and define its content. 

 

예를 들어서, paragrah element 구조는 다음과 같음

<p>content</p>

 

  • An opening tag (<p>)

  • The content (“Hello World!” text)

  • A closing tag (</p>)

*tag를 element라고 같다고 보면 안됨* 

HTML Element = tag + content 

                    = a unit of content in an HTML document formed by HTML tags and the text or media it contains.

 

HTML Tag = the element name, surrounded by an opening (<) and closing (>) angle bracket.

 

 

The Body

 

 

HTML Structure

HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.

자식 얘기가 전세계 오피셜한 얘기였구낭...

 

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

 

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.

 

 

Headings

In HTML, there are six different headings, or heading elements.

 

  1. <h1> — used for main headings. All other smaller headings are used for subheadings.
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>

 

 

Divs

One of the most popular elements in HTML is the <div> element. 

 

<div> is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together.

 

Remember to always add two spaces of indentation when you nest elements inside of <div>s for better readability.

 

 

Attributes

If we want to expand an element’s tag, we can do so using an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts:

  • The name of the attribute
  • The value of the attribute

One commonly used attribute is the id. We can use the id attribute to specify different content (such as <div>s) and is really helpful when you use an element more than once. ids have several different purposes in HTML, but for now, we’ll focus on how they can help us identify content on our page.

When we add an id to a <div>, we place it in the opening tag:

 

가독성을 위해 써주는듯?

 

Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

 

  • Paragraphs (<p>) contain a block of plain text.
  • <span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.

It’s best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it’s better to use a <div>.

 

 

Styling Text

You can also style text using HTML tags.

 

  • The <em> tag will generally render as italic emphasis.
  • The <strong> will generally render as bold emphasis.

 

Line Breaks

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser.

If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.

웹사이트에서 보이는 문장에서, 엔터 기능이 이거구낭

 

질문글 1 

 

Unordered Lists

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order.

An unordered list outlines individual list items with a bullet point.

 

 

Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. 

They are useful when you need to list different steps in a process or rank items for first to last.

 

 

 

Images

Most elements require both opening and closing tags, but the <img> tag is a self-closing tag.

Note that the end of the <img> tag has a forward slash /. 

 

The <img> tag has a required attribute called src.

The src attribute must be set to the image’s source, or the location of the image. 

 

 

Image Alts

Part of being an exceptional web developer is making your site accessible to users of all backgrounds.

 

The alt attribute, which means alternative text, brings meaning to the images on our sites.

The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.

 

If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty.

꼭 있다고 좋은건 아닌가보다.

 

 

Videos

Unlike the <img> tag however, the <video> element requires an opening and a closing tag.

In this example, the video source (src) is myVideo.mp4 

The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

 

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser.

 

The controls attribute instructs the browser to include basic video controls: pause, play and skip.

 

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.