목차
HTML Home
https://www.w3schools.com/html/default.asp
HTML Introduction
> What is HTML?
- HTML : Hyper Text Markup Language
- HTML은 웹페이지를 만드는데 기준 마크업 언어이다.
- HTML은 웹페이지의 "구조"를 묘사한다
- HTML은 일련의 elements를 포함한다
- HTML elements는 브라우저에게 내용을어떻게 보여줄지를 전달한다.
- HTML elements label pieces of content such as ＂this is a heading", “this is a paragraph", “this is a link", and so on
>Web Browsers
- Chrome, Edge, Firefox, Safari..
- To read HTML documents and display them
- Not display the HTML tags, but uses them to determine how to display the document
>HTML Page Structure
* The content inside the section (the white area) will be displayed in a browser. The content inside the element will be shown in the browser's title bar or in the page's tab.
>HTML Versions
HTML Basic
>The <!DOCTYPE> Declaration
- Represents the document type, and helps the browser to display a web page correctly.
- Must only appear once, at the tope of the page(before any HTML tags)
- Not case sensitive
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Elements
> Definiation
<tagname> Content goes here . . . </tagname>
* Some HTML elements have no content(like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
>Nested HTML Elements
- Can be nested (this means that elements can contain other elements).
- All HTML documents consist of nested HTML elements.
>Never Skip the End Tag
- Some HTML elements will display correctly, even if you forget the end tag.
- Never rely on this! Unexpected results and errors may occur if you forget the end tag !
> HTML is Not Case Sensitive
- HTML tags are not case sensitive : <P> means the same as <p>
- HTML5 standard does not require lowercase tags, but W3 recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML
> 대표적 elements
1. <h> ~ </h>
2. <p> ~ </p>
3. <br>
- empty html elements
HTML Attributes
> HTML Attributes
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes come in name/value pairs
name = "value"
1. 태그 <a> / Attributes href
2. 태그 <img> / Attributes src, width, height, alt
3. style Attribute
4. lang Attribute
5. title Attribute
6.
> Suggestion
We Suggest : Always Use Lowercase Attributes The HTML standard does not require lowercase attribute names. W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.
We Suggest : Always Quote Attribute Values Try it! The HTML standard does not require quotes around attribute values
Good :
<a href="https://www.w3schools.com/html/">Visit!</a>
Bad :
<a href=https://www.w3schools.com/html/>Visit!</a>Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
HTML Headings
>HTML Headings
- Headings are defined with the <h1> to <h6> tags.
- <h1> defines the most important heading.
- <h6> defines the least important heading.
* Browsers automatically add some white space ( a margin) before and after a heading
- Search engines use the headings to index the structure and content of your web pages
- <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
* Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
- Each HTML heading has a default size.
- However, you can specify the size for any heading with the style attribute, using the CSS font-size property
HTML Paragraphs
> <p> : defines a paragraph.
- A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph
> HTML Display
- With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code
- The browser will automatically remove any extra spaces and lines when the page is displayed.
> <hr> : HTML Horizontal Rules
- Defines a thematic break in an HTML page, and is most often displayed as a horizontal rule
- Is used to separate content (or define a change) in an HTML page
> <br> : HTML Line Breaks
- Defines a line break.
- Use if you want a line break( a new line) without starting a new paragraph.
- Is an empty tag, which means that it has no end tag
> <pre> : Defines preformatted text.
- The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
HTML Styles
HTML Text Formatting
1. <b>
2. <strong>
3. <i>
4. <em>
5. <mark>
6. <small>
7. <del>
8. <ins>
9. <sub>
10. <sup>
HTML Comments
<! - - Write your comments here - - >
* Comments are not displayed by the browser, but they can help document your HTML source code.
- Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
HTML Links
- Links allow users to click their way from page to page.
> Hyperlinks
- You can click on and jump to another document.
- When you move the mouse over a link, the mouse arrow will turn into a little hand
* A link does not have to be text. A link can be an image or any other HTML element!
>Syntax
<a href="url">link text</a>
- href attribute, which indicates the link’s destination.
- link text is the part that will be visible to the reader.
- By default, a link will appear as follows in all browsers
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
> The target Attribute : Specifies where to open the linked document
- _self : Default. Opens the document in the same window/tab as it was clicked
- _blank : Opens the document in a new window or tab
- _parent : Opens the document in the parent frame
- _top : Opens the document in the full body of the window
> Absolute URLs vs. Relative URLs
- Absolute URL (a full web address) in the href attribute
- A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part)
> Use Image/Button as Link
> Link to an Email Address
>Link titles
: Specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element
HTML Images
> Syntax
<img src="url" alt="alternatetext">
- Is used to embed an image in web page.
- <img> tag is empty, it contains attributes only, and does not have a closing tag.
- Two required attributes
- src : Specifies the path to the image.
- alt : Specifies an alternate text for the image
> The src Attribute
: Specifies the path (URL) to the image
> The alt ATtribute
- Provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)
- Should describe the image
- If a browser cannot find an image, it will display the value of the alt attribute
- Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.
> Image Size - Width and Height
- Can use the style attribute to specify the width and height of an image.
- Alternatively, you can use width and height attributes.
- The width and height attributes always defines the width and height of the image in pixels
- Note : Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
- We suggest using the style attribute. It prevents styles sheets from changing the size of images
> Images in Another Folder
> Images on Another Server/Website
> Animated Images
> Image as a Link
HTML Tables
: Consists of table cells inside rows and columns
> Table Cells
<td> </td>
> Table Rows
<tr> </tr>
> Table Headers
<th>
>How to Add a border
> Collapsed Table Borders
> Width
> Column Width
> Row Height
HTML Lists
HTML Block and Inline Elements
HTML Iframe
HTML File Paths
HTML Head
