HTML Basic

Table of contents

1. Elements
   1. Element Basic Form
   2. Features of Elements
   3. Empty tag
   4. Basic Elements
2. Attribute
   1. Attribute Feature
   2. Basic Attributes
3. Comments
   1. Basic Comments
4. Setting Environment
   1. Web Browser
   2. Text editor
   3. Web Accessibility Check
5. Representative site
   1. Information

Elements

Element Basic Form

HTML elements(tags) normally come in pairs

<p> {start tag(opening tag)} </p>{end tag(closing tag)}

The end tag is written like the start tag, but with a forward slash inserted before the tag name

Features of Elements

• can be nasted

• never skip the end tag

• not case sensitive, 하지만 소문자 권장

Empty tag

HTML tags with no content. Empty tags do not have an end tag, such as the <br> element

Basic Elements

• <h1>

  defines a large heading

• <p>

  defines a paragraph

• <a>

  defines a link, link’s destination specified in the href attribute

• <img>

  defines a images, The source file (src), alternative text (alt), width, and height are provided as attributes

Attribute

Attribute Feature

▸ All HTML elements can have attributes

▸ Attributes provide additional information about an element

▸ Attributes are always specified in the start tag

▸ Attributes usually come in name/value pairs like: name=”value”

▸ attribute값 안에 불필요한 공백이 들어가면 오류 → but 파일 이름 등 필수로 들어가는 경우 “”로 묶어야지 오류가 안남

Basic Attributes

• href : link address is specified in the href attribute

• src : filename of the image source = 주소

• alt : The alt attribute specifies an alternative text to be used, if an image cannot be displayed. can be read by screen readers

• style : specify the styling of an element, like color, font, size etc.

• lang : important for accessibility applications (screen readers) and search engines

• title : displayed as a tooltip when you mouse over

• view more…

Single or Double Quotes?

Comments

Basic Comments

주석

▸ 여러줄도 가능

<!-- This is a comment --> This is a comment

Setting Environment

Web Browser

• Chrome

  확장자 도구 : web developer, outline

Text editor

• 대표적인 에디터 : Brackets, Atom, Visual Studio Code, Eclipse

• 확장기능 관리자

  ▸ HTML Snippets : html 태그 자동완성

      emmet이 없어짐..

  ▸ tree icons, vscode-icons : 아이콘 이미지

  ▸ Color Highlight : 색 표시

  ▸ custom work : 파일 보여줌

  ▸ Prettier - Code formatter : 주요 문법을 예쁜 형태로 정리

  ▸ Beautify : Prettier와 비슷한 익스텐션

  ▸ indent-rainbow : 인덴트 단계를 색상으로 예쁘게 구분

  ▸ Live Server : 따로 웹서버 열기 귀찮을 때 요긴한 익스텐션, Go Live를 누르면 본값으로 5500포트를 사용하는 페이지가 열림

  ▸ Lorem ipsum : Ctrl + P를 입력하면 로렘 입숨 자동입력

  ▸ stylelint : CSS 문법을 체크

학원에서 주로 쓰는 툴 Eclipse, 처음 설정하는 법

Web Accessibility Check

• 에이쿨첵! : 웹 접근성 솔루션 검사 프로그램

Representative site

Information

• 익스텐션