[Basic HTML/CSS] 1. html - basic tags

BASIC HTML & CSS1. html - basic tags

[ 2017.01.05. Thu ]

To Do

1. Basic Tags○ h1~h6, div, p, span, img, a, strong, b, em, i

2. List tags○ ul li, ol li, dl dt dd

3. Table tags○ table, thead, tbody, tfoot, tr, td, colgroup, col

4. Form tags○ form, fieldset, legend, label, input, select, option, textarea, button

5. Etc○ header, footer, nav, aside, section, article○ iframe, blockquote, ruby, sup, sub, pre, code, mark

Syntax

HTML Syntax

<p>Hello</p>start tag close tagcontents

HTML Syntax

<img src="filename.jpg">tag valueproperty

<input type="text">tag valueproperty

Document Structure

<!DOCTYPE html><html lang="en">

<head><meta charset="UTF-8"><title>Document</title>

</head><body>

</body></html>

문서 형식선언

최상위 요소

헤드

바디(본문 영역)

문자셋

브라우저 제목 표시줄

block vs. inline

div b i h1~h6 p span img a strong em

block element inline element


span, img, a,strong, b, em, i

div b i h1~h6 p span img a strong em

div, h1~h6, p

width: 100% width: auto


How to know easy?

Elements

h1~h6The HTML <h1>–<h6> elements represent six levels of section headings.

<h1> is the highest section level and <h6> is the lowest.

block

divThe HTML <div> element is the generic container for flow content and

does not inherently represent anything.

block

★★★★★

pThe HTML <p> element represents a paragraph of text.

block

spanThe HTML <span> element is a generic inline container for phrasing

content, which does not inherently represent anything.

inline

imgThe HTML <img> element represents an image in the document.

inline

ex.

<img src="url" alt="simple description">

aThe HTML <a> element (or anchor element) creates a hyperlink to other

web pages, files, locations within the same page, email addresses, or any other URL.

inline

ex.

<a href="url" target="_blank"></a><a href="mailto:[email protected]"></a>

<a href="tel:821012345678"></a>

strong & b● strong : The HTML <strong> element gives text strong importance,

and is typically displayed in bold.● bold : The HTML <b> element represents a span of text stylistically

different from normal text, without conveying any special importance or relevance, and that is typically rendered in boldface.

inline

em & i● em : The HTML <em> element marks text that has stress emphasis.

The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

● i : The HTML <i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

inline

Practice

<body><div id="wrap">

<div id="header"></div><div id="container"></div><div id="footer"></div>

</div></body>

<div id="container"><div id="column_left"></div><div id="column_right"></div><div id="column_bottom"></div><div id="column_bn"></div>

</div>

Tip

html *** mdn

Facebook / Twitter / Codepen

@zineeworld

[Basic HTML/CSS] 1. html - basic tags

Technology