Basic

Table of contents

1. Head elements
   1. <title>
   2. <style>
   3. <link>
   4. <meta>
   5. <script>
   6. <base>
2. Body elements
   1. <h1>~<h6>
   2. <p>
   3. <hr>
   4. <br>
   5. <a>
   6. <img>
   7. <picture>
   8. <text formattings>

Head elements

<title>

a title in the browser tab

▸ provides a title for the page when it is added to favorites

▸ displays a title for the page in search engine results

<title>Document</title>

<style>

style information for a single HTML page

<style>
    .hello{
        margin: 0;
    }
</style>

<link>

link to external style sheets

<link rel="stylesheet" href="mystyle.css">

<meta>

specify which character set is used, page description, keywords, author, and other metadata

used by browsers (how to display content), by search engines (keywords), and other web services

<meta charset="UTF-8">
<meta name=“description” content=“생활코딩의 소개자료” > 
<meta name="keywords" content="HTML, CSS, XML, JavaScript"> // 문서를 정의하는 단어들(키워드)
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30"> // 30초 간격으로 새로고침됨

Setting The Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>

define client-side JavaScripts

<script src="demo.js"></script>
  
or
  
<script>
    window.alert("demo")
</script>

<base>

specifies the base URL and base target for all relative URLs in a page

<base href="https://www.w3schools.com/images/" target="_blank">

Body elements

<h1>~<h6>

제목

▸ <h1>이 제일 중요한 헤딩, <h6> 제일 중요하지 않은 제목

▸ Search engines use the headings to index the structure and content of your web pages.

▸ It is important to use headings to show the document structure.

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

!Note

<p>

Paragraphs

<p>This is paragraph tag</p>

!Note

<hr>

Horizontal Rules

▸ empty tag (has no end tag)

attribute : width size color align

<hr>
<hr width="200" size="30" color="lightblue" align="center"/>
<hr width="200" size="30" color="lightyellow" align="left"/>
<hr width="200" size="30" color="lightgreen" align="right"/>

<br>

single line break

▸ empty tag (has no end tag)

<br>

<a>

링크

attribute : target, href, download

<a href="https://gekdev.github.io/" target="_blank">anchor tag</a>

• target

  페이지를 어떤 형식으로 오픈할건지

  value

  • _blank : Opens the linked document in a new window or tab

  • _self : Opens the linked document in the same window/tab as it was clicked (default)

  • _parent : Opens the linked document in the parent frame

  • _top : Opens the linked document in the full body of the window(윈도우 페이지)

  • framename : Opens the linked document in a named frame (target=”사용자 지정”)

• href

  어떤 데이터를 제공할지

  ▸ download 속성을 추가하면 href에 주소에 있는게 다운로드 됨

  value

  • Address

    ▸ 절대주소는 로고에 사용, 호스팅 주소부터 끌고온다

    ▸ 상대경로가 가장 좋은 방법!

    ex) 메인페이지

  • mail

    ex) href=”mailto:moliuo@naver.com”

  • number

    ex) href=”tel:010-0000-0000”

  • Web pages

  • Images

  • Style sheets

  • JavaScripts

  • 북마크

    ▸ 북마크 하고싶은곳의 id, name 으로 연결할 수 있음 (둘다 가능)

    ▸ 다른 파일의 id는 {href=”파일명(주소)#앵커이름”}으로 연결함

      <a href="../a.html#a"></a>
      ...
    
      <div id="a"></div> or
      <div name="a"></div>
    

!Note

<img>

이미지

attribute : The source file (src), alternative text (alt), width, and height

▸ 이미지 투명도 조절 : opacity: 0.3;

<img src="주소" alt="시각장애우를 위해 꼭 써야하는 속성">

▸ map element 활용할 수 있음 Example

페이지를 이동하는 이미지맵

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

자바스크립트를 활용한 이미지맵

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

<picture>

이미지

add more flexibility when specifying image resources

▸ contains a number of <source> elements, each referring to different image sources.

▸ browser can choose the image that best fits the current view and/or device.

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

When to use the Picture Element

!Note

<text formattings>

Omitting html, head and body tag?