W3schools - HTML_Intro
찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요
HTML
Stands for Hyper Text Markup Language
Is the standard markup language for Web pages
Describes the structure of a Web page
Consists of a series of elements
Elements tell the broswer how to display the content
Elements label pieces of content
<!DOCTYPE html> <!-- declaration defines that this document is an HTML5 document -->
<html> <!-- Is the root element of an HTML page -->
<head> <!-- contains metha information about the HTML page -->
<title>Page title</title>
<!-- specifies a titile for the HTML page(which is shown in the broser’s title bar or in the page’s tab -->
</head>
<body> <!-- defines the document’s body, and is a container for all the visible -->
<h1>My First Heading</h1> <!-- defines a large heading -->
<p>My frist paragraph</p> <!-- defines a paragraph -->
<a href=“https://www.w3schools.com”>This is a link</a>
<!-- defines a link, it’s destination is specified in the href attribute -->
<img src = “w3schools.jpg”> <!-- defines a image, source file is provided as attribute -->
</body>
</html>
HTML element
Is defined by a start tag, some content, and an end tag
<tagname>Content goes here</tagname>
Some HTML elements have no content(like the <br> element)
These elements are called empty elements that do not have an end tag
Web browser
The purpose of web browser is to read HTML documents and display
Browser doesn’t display the HTML tags but uses them to determine how to display the document
How to view HTML source
-
Right-click in an HTML page and select “View Page Source” or similar This will open a window containing the HTML source code of the page
-
Right-click on an element and choose “Inspect” or similar to see what elements are made up of Can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens
Nested HTML elements
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
However, never rely on this
Empty HTML elements
HTML elements with no content are called empty elements
The <br> tag defines a line break, and is an empty element withdout a closing tag
HTML is not case sensitive
HTML tags aren’t sensitive, <P> means the same as <p>
But, W3C recommends lowercase in HTML
And demands lowercase for stricter document types like XHTML
Attribute
Provide additional information about HTML elements
All elements can have attributes
Are always specifited in the start tag
Usually come in name/value pairs
href attribute
- specifies the URL of the page the link goes to
src attribute
- specifies the path
URL in the src attribute
Absolute URL – Links to an external image that is hosted on another website
note – External images might be under copyright
- In addition, can’t control external image, it can suddenly be removed or changed
src = “https://www.w3schools.com/images/img_girl.jpg”
Relative URL – Links to an image that is hosted within the website
-
If the URL begins without a slash, it will be relative to the current page
-
If the URL begins with a slash, it will be relative to the domain
Lang
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page
This is meant to assist search engines and browsers
<html lang="“en”"></html>
Country codes can also be added to the language code in the lang attribute
first two chars define the lang of the HTML page
last two chars define the country
<html lang="“en-US”"></html>
Always quote attribute values
HTML standard does not require quotes around attribute values
However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML
Double quotes around attribute values are the most commno in HTML, but single quotes can also be used
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes
<p title="“John" ‘ShotGun’ Nelson”>
<!-- or vice versa -->
</p>
<p title="‘John" “ShotGun” Nelson’></p>