• 검색 결과가 없습니다.

웹프로그래밍

N/A
N/A
Protected

Academic year: 2022

Share "웹프로그래밍"

Copied!
43
0
0

로드 중.... (전체 텍스트 보기)

전체 글

(1)

웹프로그래밍

201 6 년 1학기

충남대학교 컴퓨터공학과

2. HTML Tutorial I

(2)

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

(3)

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

(4)

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

(5)

HTML Tags

Keywords (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 Browsers

Chrome, 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>

(6)

HTML Page Structure

Only the <body> area (the white area) is displayed by the browser.

HTML Introduction (cont’d)

6

(7)

The <!DOCTYPE> Declaration

Helps 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">

(8)

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

(9)

The Evolution of the Web

http://evolutionofweb.appspot.com/

(10)

HTML5의 구성요소

HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 애플리케이

션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5

(Hypertext Markup Language 5.0) 콘텐츠 내용과 형식을 표현

문서구조의 상세화

멀티미디어

폼과 이벤트 등

(Cascading Style Sheet 3.0)CSS3

콘텐츠 표현 방법을 정의

표현 기능 모듈화

웹 폰트

JavaScript

각종 API를 통해 기능을 표현

Web Storage

Web Worker

Web Socket

Geolocation API

http://www.youtube.com/watch?feature=player_embedded&v=fyfu4OwjUEI#!

(11)

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-스크린서비스제공가능

(12)

추천 브라우저

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

(13)

브라우저를 위한 사전 플러그인 프로그램

수업이나 Codecademy.com 사이트를 이용하여 학습을 할 때, 궁금한 영어 단 어의 뜻을 알려주는 사전 프로그램

크롬 웹스토어(https://www.google.co.kr/intl/ko/chrome/webstore/)에서 아래 확장 프로그램을 설치

Tooltip Dictionary

Google Dictionary

실습 수업을 위한 환경 설정 (cont’d)

13

(14)

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

(15)

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

(16)

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

(17)

Don’t Forget the End Tag

Some 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 Elements

HTML elements with no content

<br> : Empty element without a closing tag

<br/> = <br></br> Empty element with a closing tag

HTML Tip : Use Lowercase Tags

HTML5 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

(18)

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

(19)

The lang Attribute

Declared 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>

(20)

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

(21)

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

(22)

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'> or <p title="John 'ShotGun' Nelson">

(23)

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 Important

Use 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

(24)

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

(25)

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> Element

The 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

(26)

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"

(27)

HTML Background Color

The background-color property defines the background color. Try it!

HTML Text Color

The color property defines the text color. Try it!

HTML Text Fonts

The font-family property defines the font. Try it!

HTML Text Size

The font-size property defines the text size. Try it!

HTML Text Alignment

The text-align property defines the horizontal text alignment. Try it!

Test Yourself with Exercises!

HTML Styles (cont’d)

27

(28)

HTML Formatting Elements

To 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

(29)

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

(30)

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

(31)

HTML Computer Code Formatting

HTML 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

(32)

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] - ->

(33)

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 Values

Defined 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

(34)

Color Names try it!

With CSS, colors can be set by using color names

HTML Colors

34

(35)

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

(36)

Hexadecimal Colors try it!

With HTML, RGB values can also be specified using hexadecimal color values in the form.

HTML Colors (cont’d)

36

(37)

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

(38)

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 }

(39)

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

(40)

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>

(41)

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

(42)

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” >

(43)

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

참조

관련 문서

Continuous Run 버튼 Abort Execution 버튼 Pause/Continue 버튼 Text Settings 메뉴 Align Objects 메뉴. Distribute Objects

 Texts foster specific ways of seeing the world, hinder other ways, and even structure ways of relating to the text itself:!. sport media text can influence the way

In order to avoid interactions with parts of the template that might be processed in other modes (e.g. text -mode inlining inside an HTML template), Thymeleaf 3.0

§ 관련 용어: 디지털 매체, 전자기록물, 이프린트(e-print), 이텍스트(e-text), 디지털 자원, 전자정보, 디지털 지식정보 등..

내용분석 학습자분석 기술및환경분석.

-In this text the symbol ΔT is used to signify a temperature difference between two objects or two

 Ad-hoc search: Find relevant documents for an arbitrary text query.  Filtering: Identify relevant user profiles for

Field : Spatial distribution of scalar and vector quantity Electric field and magnetic field.. 3-1