This is my very first TIL.
First day of code learning as part of the 4-week 'Wecode Study' preparation for the 12-week Wecode Bootcamp.
HTML Intro
1. What is HTML?
HTML creates the structure and contents of a webpage.
"HyperText Markup Language"
- HyperText is text displayed on a computer/device that provides access to other text through links (aka hyperlinks)
- Markup Language is a languange that defines the structure and presentation of raw text
In HTML, the computer interprets raw text wrapped in HTML elements
2. HTML Anatomy
HTML is composed of elements
- elements structure the webpage and display its contents
3. HTML Elements
The basic components of an HTML element
<img source: codecademy.com>
HTML is structured as a collection of family tree relationships
> a series of elements that are organized in different levels, with lower level elements nested inside upper level elements by indentation
- parent element - the element that is in the level above its child element
- child element - the element that is nested inside the parent element and inherits the parent element's attributes
4. HTML Tags
Body
<body></body>
- anything inside the
<body>tag is what is displayed on the webpage
Division
<div></div>
<div>tags are used to divide the page into sections- useful for grouping elements together & applying custom styles to those elements
- don't have an inherent visual representation
Headings
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
- there are six different levels of headings in HTML,
<h1>~<h6>, in order from largest to smallest in size<h1>is used for main headings- all other headings,
<h2>~<h6>, are used for subheadings
- Displaying Text
Paragraph
<p></p>
- used for displaying texts
Span
<span></span>
- also used for displaying texts
- can be used to target a specific content that is inline, as opposed to blocks, for which you would use <div>
> ex)<p><span>This text</span>is separated from the rest of this paragraph</p>
- Styling (Emphasizing) Text
<em></em>
- generally render as italic emphasis
<strong></strong>
- generally render as bold emphasis
- Line Breaks
<br>
- only has the opening tag (no closing tag)
- can be used anywhere within the HTML code to insert a line break on the webpage in the browser
- Lists
Unordered List
<ul> <li></li> <li></li> ... </ul>
- used for lists with bullet points
- list items should be wrapped in separate
<li>tags under the<ul>tag
Ordered List
<ol> <li></li> <li></li> ... </ol>
- used for lists with numbers
- list items should be wrapped in separate
<li>tags under the<ol>tag
- Images & Videos
Image
<img>
- A 'self-closing' tag - only requires the opening tag
- Has a required attribute:
src- the value ofsrcis a URL (Uniform Resource Locator). URL is a web address or a local address where a file is stored.- can use the
altattribute - the value ofaltis a description of the image. Thealtattribute provides text description of image in case it fails to load on a webpage, and it plays a role in SEO (Search Engine Optimization) to improve your site's ranking
Video
<video></video>
- video also has
srcattribute - the value ofsrccan be a video file hosted alongside your webpage or the URL of a video file hosted on another webpage- can also have
weightandheightattributes that set the size of the video displayed on the browser- can also have
controlsattribute, which display the 'controls' on the video screen, such as play, pause, skip, etc.
5. Attributes
Attributes are added to the opening tag of an element to provide information, to change styling, etc.
- an attribute has two components:
- Attribute name
- Attribute value
idis a common attribute
- used to specify different content (such as a
<div>)- useful when you use an element more than once
> ex)<div id="intro"> </div>
앞으로도 더 많은 웹개발 내용 정리 부탁드려용~