2. HTML Tutorial Icontents.kocw.net/KOCW/document/2016/chungnam/leekyuchul/... · 2017-01-23 ·...
43
웹프로그래밍 2016년 1학기 충남대학교 컴퓨터공학과 2. HTML Tutorial I
Transcript of 2. HTML Tutorial Icontents.kocw.net/KOCW/document/2016/chungnam/leekyuchul/... · 2017-01-23 ·...
웹프로그래밍
2016년 1학기
충남대학교컴퓨터공학과
2. HTML Tutorial I
HTML Introduction & Development Environment
HTML Elements and Attributes
HTML Headings and Paragraphs
HTML Styles and Formatting
HTML Quotations, Computer Code, and Comments
HTML Colors
HTML Styles - CSS
HTML Links
HTML Images
목차
2
Will teaches you everything about HTML
HTML is easy to learn – You will enjoy it
Examples in Every Chapter Try it!
With our online HTML editor, you can edit the HTML, and click on a button to
view the result
HTML(5) Tutorial
3
What is HTML? Try it!
Markup language for describing web documents (web pages)
Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML Introduction
4
HTML TagsKeywords (tag names) surrounded by angle brackets
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
Web BrowsersChrome, IE, 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 Introduction (cont’d)
5
<tagname> content </tagname>
HTML Page Structure
Only the <body> area (the white area) is displayed by the browser.
HTML Introduction (cont’d)
6
The <!DOCTYPE> DeclarationHelps the browser to display a web page correctly To display a document correctly, the browser must know both type and version
Not case sensitive
HTML5
HTML4.01
XHTML 1.0
All tutorials and examples at W3Schools use HTML5
HTML Introduction (cont’d)
7
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Versions
HTML Introduction (cont’d)
8
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML5의구성요소
HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 애플리케이
션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5(Hypertext Markup Language 5.0)
콘텐츠 내용과 형식을 표현
• 문서구조의 상세화• 멀티미디어• 폼과 이벤트 등
CSS3(Cascading Style Sheet 3.0)
콘텐츠 표현 방법을 정의
• 표현 기능 모듈화• 웹 폰트
JavaScript각종 API를 통해 기능을 표현
• Web Storage• Web Worker• Web Socket• Geolocation API
http://www.youtube.com/watch?feature=player_embedded&v=fyfu4OwjUEI#!
HTML5의특징
HTML5 기술의 주요 특징 시사점
Semantics:보다 구조화되고 다양한 기능의 HTML 태그를 제공
보다지능화되고다양한형태의풍부한웹문서표현가능
Multimedia:비디오, 오디오 지원 기능의 자체 지원을 통한 강력한 멀티미디어 기능 제공
액티브X와플래시같은별도외부플러그필요성제거
Offline & Storage:네트워크가 지원되지 않는 환경에서도 웹 이용을 가능케 하는 오프라인 처리 기능과 로컬 스토리지, DB, File 액세스 처리 가능
웹의한계로여겨졌던네트워크단절시처리방법과데이터저장기능문제해결
3D, Graphics & Effects:SVG, 캔버스, WebGL 등을 통한 다양한 2차원/3차원 그래픽 기능의 제공
외부플러그인없이다양한2D/3D 그래픽처리가능
Device Access:GPS,카메라, 동작센서등디바이스의하드웨어기능을웹에서직접제어할수있도록하는기능
웹기반디바이스제어기능을통해본격적인웹애플리케이션개발가능
Performance & Integration:비동기 통신, 다중 쓰레드 기능 등을 통한 웹에서의 처리 성능 향상
웹의가장큰문제중하나였던성능문제를대폭개선
Connectivity:클라이언트와서버간의효율적인통신기능제공을통한웹기반커뮤니케이션효율대폭강화
웹에서다양한통신(메시징, 응용간통신등) 제공을통한응용개발범위확대
CSS Styling Effect:기존웹문서의변경과성능저하없이웹애플리케이션의UI(스타일과효과등) 기능을대폭강화
UI 측면에서N-스크린서비스제공가능
추천브라우저
Chrome 설치URL
https://www.google.co.kr/intl/ko/chrome/browser/desktop/
Notepad를이용하여HTML 작성
전문적인HTML 에디터
Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor
W3schools에서는Notepad(PC)와같은텍스트에디터를추천 Try it!
단순한텍스트에디터를이용하는것은 HTML을배우는좋은방법임.
설치URL
http://notepad-plus-plus.org/
실습수업을위한환경설정
12
브라우저를위한사전플러그인프로그램
수업이나 Codecademy.com 사이트를이용하여학습을할때, 궁금한영어단
어의뜻을알려주는사전프로그램
크롬웹스토어(https://www.google.co.kr/intl/ko/chrome/webstore/)에서아래
확장프로그램을설치
Tooltip Dictionary
Google Dictionary
실습수업을위한환경설정 (cont’d)
13
HTML Documents Try it!
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML documents itself begins with <html> and end with </html>
The visible part of the HTML documents is between <body> and </body>
HTML Headings Try it!
HTML headings are defined with the <h1> to <h6> tags.
HTML Paragraphs Try it!
HTML paragraphs are defined with the <p> tag.
HTML Basic Examples
14
HTML Links Try it! HTML links are defined with the <a> tag.
The link’s destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images Try it!HTML images are defined with the <img> tag.
The source file (src), alternative text(alt), and size (width and height) are provided as attributes.
You will learn more about attributes in a later chapter.
HTML Basic Examples (cont’d)
15
Written with a start tag, with an end tag, with the content
Some HTML elements do not have an end tag. Ex: <br>
Nested HTML Elements Try it!Elements can contain elements
HTML Elements
16
Don’t Forget the End TagSome HTML elements will display correctly, even if you forget the end tag Try it!
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag
Empty HTML ElementsHTML elements with no content
<br> : Empty element without a closing tag
<br/> = <br></br> Empty element with a closing tag
HTML Tip : Use Lowercase TagsHTML5 standard does not require lowercase tags, but W3 recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML
HTML Elements (cont’d)
17
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like : name=“value”
HTML Attributes
18
The lang AttributeDeclared in the <html> tag
The language is declared in the lang attribute
Important for accessibility applications (screen readers) and search engines
HTML Attributes (cont’d)
19
<!DOCTYPE html><html lang=“en-US“><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
The title Attribute Try it!Declared in the <p> tag
문단의타이틀을지정해주는속성
설정된문단에마우스를올렸을때보여짐.
The href Attribute Try it!HTML links are defined with the <a> tag.
The link address is specified in the href attribute.
HTML Attributes (cont’d)
20
The size Attribute Try it!Declared in the <img> tag
The source file (src), alternative text(alt), and size (width and height) are provided as attributes.
The image size is specified in pixels.
The alt Attribute Try it!The alt attributes specifies an alternative text to be used, when an HTML element cannot be displayed.
HTML Attributes (cont’d)
21
Single or Double Quotes?In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.
Some Attributes often used in HTML
HTML Attributes (cont’d)
22
<p title='John "ShotGun" Nelson'> <p title="John 'ShotGun' Nelson">or
Headings are defined with the <h1> to <h6> tags. Try it!<h1> defines the most important heading.
<h6> defines the least important heading.
Headings are ImportantUse HTML headings for headings only. Don’t use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages
h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
HTML Horizontal Rules <hr> tag : a horizontal line in an HTML page. Try it!
Can be used to separate content.
HTML Headings
23
HTML Paragraphs
<p> element defines a paragraph. Try it!
Browsers automatically add an empty line 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 Try it!
The browser will remove extra spaces and extra lines when the page is displayed.
Any number of spaces, and any number of new lines, count as only one space.
HTML Paragraphs
24
HTML Line Breaks<br> element defines a line break. Try it!
Use <br> if you want a line break( a new line) without starting a new paragraph.
The HTML <pre> ElementThe HTML <pre> element defines preformatted text. Try it!
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
Test Yourself with Exercises!
HTML Paragraphs (cont’d)
25
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML Style Attribute
property : CSS property
value : CSS value
HTML Styles
26
style="property:value"
HTML Background ColorThe background-color property defines the background color. Try it!
HTML Text ColorThe color property defines the text color. Try it!
HTML Text FontsThe font-family property defines the font. Try it!
HTML Text SizeThe font-size property defines the text size. Try it!
HTML Text AlignmentThe text-align property defines the horizontal text alignment. Try it!
Test Yourself with Exercises!
HTML Styles (cont’d)
27
HTML Formatting ElementsTo display special types of text.
Bold text, important text, italic text, emphasized text, marked text, small text, deleted text, inserted text, subscripts, superscripts
HTML Bold and Strong Formatting<b> element defines bold text, without any extra importance. Try it!
<strong> element defines strong text, with added semantic “strong” importance. Try it!
HTML Italic and Emphasized Formatting<i> element defines italic text, without any extra importance. Try it!
<em> element defines emphasized, with added semantic importance. Try it!
HTML Text Formatting Elements
28
HTML small Formatting try it!
HTML Marked Formatting try it!
HTML Deleted Formatting try it!
HTML Inserted Formatting try it!
HTML Subscript Formatting try it!
HTML Superscript Formatting try it!
Test Yourself with Exercises!
HTML Text Formatting Elements (cont’d)
29
HTML <q> for short Quotations try it!
The HTML <q> element defines a short quotation.
HTML <blockquote> for long Quotations try it!
The HTML <blockquote> element defines a quoted section.
HTML <abbr> for Abbreviations try it!
The HTML <abbr> element defines an abbreviation or an acronym.
HTML <address> for Contact Information try it!
The HTML <address> element defines contact information (author/owner) of a document or article.
HTML <cite> for Work Title try it!
THE HTML <cite> element defines the title of a work.
HTML <bdo> for Bi-Directional Override try it!
The HTML <bdo> element defines bi-directional override.
Test Yourself with Exercises!
HTML Quotation and Citation Elements
30
HTML Computer Code FormattingHTML normally uses variable letter size and spacing.The <kbd>, <samp>, and <code> elements all support fixed letter size and spacing.
HTML <kbd> For Keyboard Input try it!The HTML <kbd> element defines keyboard input.
HTML <samp> For Computer Output try it!The HTML <samp> element defines sample output from a computer program.
HTML <code> For Computer Code try it!The HTML <code> element defines a piece of programming code.<code> element does not preserve extra whitespace and line-braeks.To fix this, you can put the <code> element inside a <pre> element. try it!
HTML <var> For Variables try it!The HTML <var> element defines a variable.
Test yourself with Exercises!
HTML Computer Code Elements
31
HTML Comment Tags
Comments are not displayed by the browser, but they can help document
your HTML. Try it!
Comments are also great for debugging HTML, because you can comment
out HTML lines of code, one at a time, to search for errors.
Conditional Comments
Defines HTML tags to be executed by Internet Explorer only.
HTML Comments
32
<! - - Write your comments here - - >
<! – [ if IE 8]>…. some HTML here…
<! [endif] - ->
Colors are displayed combining RED, GREEN, and BLUE light.
140 Color Names are Supported by All Browsers.17 colors are from the HTML specification, 123 colors are from the CSS specification.
Sorted by Color Name Try it!
HTML Color ValuesDefined using a hexadecimal (hex) notation for the Red, Green, and Blue values (RGB) Try it!
The lowest value for each light source : 0 (hex 00)
The highest value : 255 (hex FF)
Hex values are written as # followed by either three or six hex characters.
Colors Sorted by HEX Value Try it!
HTML Color Shades Try it! / 216 "Web Safe Colors"
HTML Color Names, Color Values, Color Shades
33
Color Names try it!
With CSS, colors can be set by using color names
HTML Colors
34
RGB (Red, Green, Blue ) try it!
With HTML, RGB color values can be specified using this formula
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
HTML Colors (cont’d)
35
Hexadecimal Colors try it!
With HTML, RGB values can also be specified using hexadecimal color values
in the form.
HTML Colors (cont’d)
36
Styling HTML with CSS
Cascading Style Sheets
Styling can be added to HTML elements in 3 ways.
Inline – using a style attribute in HTML elements
Internal– using a <style> element in the HTML <head> section
External – using one or more external CSS files (the most common way)
In this tutorial, we use internal styling, because it is easier to
demonstrate, and easier for you to try it yourself.
HTML Styles - CSS
37
CSS Syntax
element : HTML element name, property : CSS property, value : CSS value
Multiple styles are separated with semicolon.
Inline Styling (Inline CSS) Try it!Useful for applying a unique style to a single HTML element.
Use the style attribute.
Internal Styling (Internal CSS) Try it!Can be used to define a common style for all HTML elements on a page.
Defined in the <head> section of an HTML page, using a <style> element.
HTML Styles – CSS (cont’d)
38
element { property : value ; property : value }
External Styling (External CSS) Try it!
Ideal when the style is applied to many pages.
Defined in the <head> section of an HTML page, in the <link> element.
In our class, this way is recommended!
HTML Styles – CSS (cont’d)
39
Links allow users to click their way from page to page.
HTML Links – Hyperlinks
An element, a text, or an image that you can click on, and jump to another
document.
HTML Links – Syntax Try it!
href attribute specifies the destination address
Can be absolute(to another web site) or relative(to anther page on this site)
link text is the visible part
HTML Links
40
<a href = “url” > link text</a>
HTML Links – The target Attribute Try it!
Specifies where to open the linked document
In a new browser window or in a new tab
HTML Links (cont’d)
41
HTML Images Syntax
Defined with the <img> tag.
<img> tag is empty, it contains attributes only, and does not have a closing tag.
src attribute defines the url of the image.
The alt Attribute
Specifies an alternate text for the image, if it cannot be displayed.
Required
Screen readers can read the alt attribute
HTML Images
42
<img src = “url” alt = “some_text” >
<img src = “html5.gif” alt = “The official HTML5 Icon” >
Image Size – Width and Height
Can use the style attribute to specify the width and height of an image. Try it!
Alternatively, you can use width and height attributes. Try it!
Test Yourself with Exercises!
<< Here is the end of “INTRODUCTION TO HTML” in Codecademy.com. >>
HTML Images (cont’d)
43
