[Basic HTML/CSS] 1. html - basic tags
2 likes874 views
This document provides an overview of basic HTML tags organized into sections on headings, lists, tables, forms and other tags. It covers common block elements like <div>, <p>, <h1-h6> and inline elements like <span>, <img>, <a>, <strong> and <em>. The document also reviews HTML document structure and the differences between block and inline elements.
![BASIC HTML & CSS
1. html - basic tags
[ 2017.01.05. Thu ]](https://image.slidesharecdn.com/1-170304051258/85/Basic-HTML-CSS-1-html-basic-tags-1-320.jpg)
![[Basic HTML/CSS] 1. html - basic tags](https://image.slidesharecdn.com/1-170304051258/85/Basic-HTML-CSS-1-html-basic-tags-24-320.jpg)
[Basic HTML/CSS] 1. html - basic tags
- 1. BASIC HTML & CSS 1. html - basic tags [ 2017.01.05. Thu ]
- 2. 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
- 3. Syntax
- 4. HTML Syntax <p>Hello</p> start tag close tagcontents
- 5. HTML Syntax <img src="filename.jpg"> tag valueproperty <input type="text"> tag valueproperty
- 7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 문서 형식선언 최상위 요소 헤드 바디(본문 영역) 문자셋 브라우저 제목 표시줄
- 9. div b i h1~h6 p span img a strong em block element inline element
- 10. 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
- 11. width: 100% width: auto block element inline element How to know easy?
- 12. Elements
- 13. h1~h6 The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. block
- 14. div The HTML <div> element is the generic container for flow content and does not inherently represent anything. block ★★★★★
- 15. p The HTML <p> element represents a paragraph of text. block
- 16. span The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. inline
- 17. img The HTML <img> element represents an image in the document. inline
- 18. ex. <img src="url" alt="simple description">
- 19. a The 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
- 20. ex. <a href="url" target="_blank"></a> <a href="mailto:[email protected]"></a> <a href="tel:821012345678"></a>
- 21. 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
- 22. 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
- 23. Practice
- 25. <body> <div id="wrap"> <div id="header"></div> <div id="container"></div> <div id="footer"></div> </div> </body>
- 26. <div id="container"> <div id="column_left"></div> <div id="column_right"></div> <div id="column_bottom"></div> <div id="column_bn"></div> </div>
- 27. Tip
- 28. html *** mdn
- 29. Facebook / Twitter / Codepen @zineeworld