반응형

 

[광고 누르면 오늘의 행운 상승!!]

https://www.w3schools.com/html/default.asp

html,css 등 다양한 실습을 진행할 수 있는 사이트

 

HTML이란

HTML이란 Hyper TextMarkup Language 의 약자 웹용 콘텐츠의 구조를 지정하는 컴퓨터 언어 HTML은 웹서버에 저장되며 클라이언트 웹 브라우저에 읽혀지고 해석되어 화면에 보여진다.

HTML5 특징

  1. 기존 HTML과의 호환성 유지
  2. 실용적 설계: 느슨한 문법, 효율적인 추가 요소, 안전한 보안
  3. 표현과 내용의 완벽한 분리
  4. 플러그인 없이 각종 미디어 처리 및 동적인 작동: 캔버스
  5. 최신 웹 기술 수용: 지오로케이션, 웹소켓, 웹스토리지, 웹워커 등

HTML 시작하기

Doctype 지정하기

  • HTML은 여러 버전이 존재하므로Doctype을 명시해야 한다.
  • 기존 Doctype 은 매우 길고 복잡한 DTD를 명시해야 했었다.
  • HTML5의 실용성 원칙으로 인해 짧아졌다.
  • <!DOCTYPEhtml>

HTML 작성 규칙

  • HTML의 마크업 명령은 요소라 부른다.
  • HTML은 대소문자를 구분하지 않는다.
  • 요소는 콘텐츠와 구분을 위해서 꺽쇠로 둘러싼다. – 태그 <p>, <a>, <div>
  • 시작태그와 마침태그로 요소의 범위를 지정한다. <p>이것은 단락 입니다.</p>
  • 마침태그가 없이 단독으로 사용되는 요소도 있다. <br>, <img>, <meta> 등
  • 요소의 속성은 속성명 = “속성값” 형식으로 기술한다. <img src=”img/logo.jpg” alt=”Company Logo”>

HTML의 구조

<!Doctype html>
<html>
		<head>
		</head>
		<body>
		</body>
</html>
  • <html>은 HTML 코드 전체를 감싼다.
  • HTML은 <head>와 <body> 부분으로 나뉜다.
  • <head>는 메타데이터와 스크립, CSS등이 위치한다.
  • <body>부분은 콘텐츠가 담기는 곳으로 웹 브라우저에 표시된다.

Head 설정

타이틀 지정

  • HTML 파일의 제목으로 웹 브라우저 타이틀에 나타난다.
  • <title>웹 페이지 제목</title>

문자 인코딩

  • 사용하는 텍스트 에디터의 문자 인코딩과HTML의 문자 인코딩과 동일해야 웹 브라우저에서 옳바르 게 표시된다.
  • 유니코드인 UTF-8로 지정한다.

메타데이터

  • 메타데이터를 기술 하면 웹 검색에 유리하다.

  • HTML에 대한 정보를 기록할 수 있다.

  • 메타데이터 기술 방법 <meta name="description"content="HTML5와 Javascript 학습콘텐츠"> <meta name="keywords"content="HTML5, CSS, JavaScript">

HTML과 함께 사용되는 CSS와 자바스크립트는
다른 파일로 분리함이 원칙이다.

  • 외부 CSS 파일 연결 <link rel=”stylesheet” href=”css/style.css”>
  • 외부 자바스크립트 파일 연결 <scriptsrc="js/script.js"></script>
반응형

'5. 웹 프로그래밍 > 1. HTML' 카테고리의 다른 글

HTML 기타 요소들  (0) 2020.03.20
HTML 서식 [Form][요소]  (0) 2020.03.20
HTML 표 [Table][표]  (0) 2020.03.20
HTML의 요소 [HTML][요소][섹션]  (0) 2020.03.20
간단한 웹 화면 만들기[HTML]  (0) 2020.03.15

+ Recent posts

티스토리툴바