Web

[1028 from 생활코딩 HTML]

 

HTML 하이퍼 텍스트 마크업 랭귀지: 하이퍼 텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어
1990년 팀버너스 고안
target _blank 새탭에서 열기
_self         클릭한 페이지에서 이동
_parent 클릭한 페이지를 연 탭에서 이동
_top         (프레임 개념에서) 전체 프레임 이동
검색에 포함 할 지 안할지 설정 <meta name="robots" content="noindex" />   http://www.naver.com/robots.txt 
SEO 검색엔진 최적화 (SEO: search engine optimization): 검색어 잘검색, 상위노축 목표

1. (기초)명확하고 독창적인 타이틀의 사용, descripttion 메타태그 활용

2. (사이트 구조 개선 )페이지  url 구조 개선, 사이트 내에서 이동하기 쉽게하기

3. (콘텐츠 최적화)적합한 태그 사용

4. (검색 로봇에 대한 대처)검색엔진에 노출되지 않았으면, 노출되었으면 : 원하는 형식으로 검색되도록함

5. (모바일을 위한 최적화)Google 에게 모바일용 사이트 알리기

6. (사이트 홍보와 분석) 웹마스터 도구 활용. 
모바일 화면 맞추기 <meta name="viewport" content="width=device-width, initial-scale=1.0">
a  href anchor  / Hypertext Reference /
li   ui   ol  li(LIST) 태그, 그룹핑 ul(unordered list), ol(ordered list)
<!DOCTYPE html> Document type declaration : 문서 형식 선언 어떤 형식에 문서를 작성했느냐에 따라 적당하게 선택 했으나 HTML5 부터 "<!DOCTYPE html>"단일화됨.
p    br   alt paragraph  팔라그래프, 달락  / a Forced line break / alternative 대체제
option 여러개 선택가능 속성 multiple
파일업로드 폼 <form action="" method="" enctype="multipart/form-data">
메타태그 30초 리프레쉬 <meta http-equiv="refresh" content="30">

 

deprecated 사용안함 duplicate  복제됨

 

 

HTML의 모든것[by 생활코딩]

 

-  하이퍼 텍스트 마크업 랭귀지: 하이퍼 텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어

-  사람 & 웹브라우저 간의 언어 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<!DOCTYPE html>

<html lang="ko">

<head>

<title>HTML 구조보기</title>

<meta charset="utf-8">

<meta name="description" content="HTML 설명, 분석">

<meta name="keywords" content="html,구조, semantic, SEO">

<meta name="author" content="저자명">

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

</head>

<body>

    <header>

        <h1>HTML</h1>

    </header>

    <aside>

        <a

            href="http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html"

            alt="HTML 변천사와 통계"></a>

    </aside>

    <nav>

        <ol>

            <li><a href="study_html.html">HTML</a></li>

            <li><a href="step2.html">자료구조</a></li>

            <li><a href="drengineer.tistory.com">만든사람</a></li>

        </ol>

    </nav>

    <section>

        <h1>HTML 이란</h1>

        <ol>

            <li>하이퍼 텍스트 마크업 랭귀지 : 하이퍼 텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터  프로그래밍 언어</li>

            <li>사람 & 웹 브라우저 간의 언어</li>

        </ol>

    </section>

    <section>

        <article>

            <h3>&gt;!DOCTYPE html&lt;</h3>

            <p>Document type declaration : 문서 형식 선언, html5 부터 단일화</p>

            <h3>meta태그</h3>

            <p>

                <strong>&gt;meta charset="utf-8"&lt;</strong> charset(문자집합, 문자 규칙) :웹브라우저가 저장방법이 utf-8라고 인식 해석함.

            </p>

            <p>Html 에서 head 는 부가적인 정보 body는 출력내용</p>

            <h3>semantic 의미론적인 태그</h3>

            <p>header, section, article, figure, footer, nav, aside는 자주사용함</p>

        </article>

        <article>

            <h3>HTML의 핵심~!~! a 태그</h3>

            <p>anchor(배의 닷)는 href(Hypertext Reference) 의 주소에 정박해 있음.</p>

            <p>속성 target: _blank(새탭에서 열기), _self(클릭페이지에서 이동), _parent(클릭한 페이지를 연 탭에서 이동), _top(프레임 개념에서 전체 프레임 이동)

            <h3>태그 뜻</h3>

            <p>p(makes a paragraph: 팔라그래프, 단락), h1(makes a heading), span , div 는 뜻 없음</p>

            <p>li(list), ul(unordered list), ol(ordered list)</p>

            <p>src (subsystem controller), alt(alternative, 대체제)</p>

            <p>br(a forced line break)</p>

        </article>

        <article>

            <h3>검색엔진 최적화(SEO: search engine optimization)</h3>

            <p>기능에 맞게 사용 하면됩니다.</p>

            <figure>

                <img alt="robots.txt 파일의 적절한 위치를 보여주는 이미지입니다." class="shadow"

                    height="81"

                    src="//storage.googleapis.com/support-kms-prod/FvuMa2e4rItLKsRFiXPsamBln3HAtN39iKqd"

                    title="robots.txt 파일의 적절한 위치를 보여주는 이미지입니다." width="510">

                <figcaption>Fig.1 - robots.txt</figcaption>

            </figure>

            <p>주소/robots.txt 로 robots(네트워크를 통해 접속하는 소프트 웨어) 접속 유무를 설정가능</p>

        </article>

    </section>

    <footer>

        <details>

            <summary>Copyright 2019.</summary>

            <p>All Rights Reserved.</p>

        </details>

    </footer>

</body>

</html>

 

 

Colored by Color Scripter

 cs

* target: 

_blank 새탭에서 열기

_self         클릭한 페이지에서 이동

_parent 클릭한 페이지를 연 탭에서 이동

_top         (프레임 개념에서) 전체 프레임 이동

* http://www.naver.com/robots.txt  : 검색에 포함 할 지 안할지 설정  cf) 

   https://support.google.com/webmasters/answer/6062596?hl=ko

* 검색엔진 최적화 (SEO: search engine optimization)

* 모바일 화면 맞추기 : <meta name="viewport" content="width=device-width, initial-scale=1.0">

*html5

  속성 : autocomplete, placeholder, autofocus, required, pattern

 

 

1. HTML 기본 문법과 기본태그기본문법

마크업 - 태그와 밀접

- 태그

강조 : <strong></strong> 

제목: <h1></h1><h2></h2>

 

- 속성

링크 태그 <a></a> 의 속성 href,, target:  title

cf) http://www.tagindex.net/html/frame/a_target.html

 

* target: 

_blank 새탭에서 열기

_self         클릭한 페이지에서 이동

_parent 클릭한 페이지를 연 탭에서 이동

_top         (프레임 개념에서) 전체 프레임 이동

실습1) 

메모장

----------------------------------------------------------------------------------------------------------------------

<h1>오늘의 명언</h1>우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다. -

도널드 커누스

----------------------------------------------------------------------------------------------------------------------

입력  확장자".html", 모든파일, UTF-8 로 선택 저장

웹브라우저료 열기

 

 

- 하이퍼텍스트  

 "링크시켜 사용" 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있음

웹의 특성 "a 태그"는 anchor 의 약자 (배의 닷) href(Hypertext Reference) 의 주소에 정박해 있음. 

웹의 창시자 : 팀버너스리가 만듬. 

GML(1960) >> SGML >> SGMLguid(팀버너스리 유럽입자물리연구소) >> HTML 1990년 팀버너스 고안

기존 17개 에 팀버너스리가 a 태그를 추가하여 18개 태그의 HTML 을 만듦.  현재 140개 태그 존재

* 맥에서는 텍스트 편집기 사용시 편집> 대체 > 스마트 인용 해제

 

- li(LIST) 태그, 그룹핑 ul(unordered list), ol(ordered list) 태그

 

 

 

<ol>

    <li>기술소개</li>

    <li>기본문법</li>

    <li>하이퍼텍스트와 속성</li>

    <li>리스트와 태그의 중첩 </li>

</ol>

<ul>

    <li>최진혁</li>

    <li>최유빈</li>

    <li>한이람</li>

    <li>한이은</li>

</ul>

 

 

 

- 문서의 구조

Html 에서 head 는 부가적인 정보 body는 출력내용 

 

- DOCTYPE

Document type declaration : 문서 형식 선언

어떤 형식에 문서를 작성했느냐에 따라 적당하게 선택 했으나 HTML5 부터 "<!DOCTYPE html>"단일화됨. 

 

<!DOCTYPE html>

<head>

<title>HTML-수업소개</title>

<meta charset="utf-8>

</head>

<body>

<h1>HTML</h1>

<ol>

<li>기술소개</li>

<li>기본문법</li>

<li>하이퍼텍스트와 속성</li>

<li>리스트와 태그의 중첩 </li>

</ol>

<h2> 수업의 목적</h2>

</body>

</html>

- 개발도구 

: 프로그램을 만들때 사용하는 도구

추천 개발도구 : atom:아톰, sublime text:서브라임 텍스트, bracket:블라켓

 

- HTML의 변천사와 통계

http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html

cf) 

deprecated 사용안함

duplicate  복제됨

 

- p태그(paragraph:팔라그래프, 단락) 

 

- br(a forced line break)태그

 

- 이미지 img 태그

html2 부터 시작

무료 이미지 사이트 :pixabay.com

속성  src (subsystem controller), 

       height, 

       alt(alternative, 대체제)

       title : 마우스 올려두면 설명

 

 

2. 표만들기

태그 table : 테이블 선언

태그 td : table data

태그 tr: table row  : 테이블 행

태그 thead

태그 tbody

태그 tfoot   --ex) 합계 , 가우데 넣어도 무조건 제일아래 출력

태그 th

속성 border : 두께 (국경, 둘레)

속성 rowspan n개 행 합치기 : 위아랫 것과 합치기

속성 colspan n개 열 합치기 : 좌우것과합치기

 

cf) makes a paragraph  : p

   makes a heading  : h1

   span , div 는 뜻 없음

 

3. 입력양식 FORM 

:사용자가 입력한 정보를 서버로 전달할 때 사용

- 태그 form

속성 action

속성 name

- 태그 input 

속성 type  의  text, password, submit( : 제출)

속성 value

- 태그 textarea

속성 cols  열의 글자 크기

속성 rows 행의 크기 

- Dropdown List

태그 select

- 태그 option

속성 value

속성 multiple   (속성값 없음  multiple만 적음)  여러개 선택 가능

- 라디오버튼

name 같은것끼리 그룹핑 

 

<input type="radio" name="color" value="red">

<input type="radio" name="color" value="blue">

<input type="radio" name="color">

- 체크박스

name 같은것끼리 그룹핑 

<input type="checkbox" name="color" value="red">

<input type="checkbox" name="color" value="blue">

- Form 버튼

 

 

 

 

<input type="button" name="button" value="버튼" onclick="allert('hello wolrld');">

- Form 리셋

<input type="reset">

- Form hidden

 

<input type="hidden" name="color" value="red">

- Form lable :래이블

이름표 , 이름표를 클릭해도 동일하게 작동

":" 미포함

<label for="id_txt">text</label>:

<input type="text" name="color" value="red" id="id_txt" >

 

":" 포함

<label >text:

  <input type="text" name="color" value="red" > 

</label>

- Form method

form 속성 method 

get, post 

- Form 파일업로드

<input type="file"> 

form 속성 name 은 별도로저장

form 속성 method 는 post로

form 속성 enctype 는 multipart/form-data

 

3. 정보로서의 HTML

 "태그" 초기 18개.. 현재 190개 태그 존재

- font 태그

 : 퇴출된 태그 . 기존사용된것 위해 알고있기만 : "의미" 태그를 위해 font 태그사용 지양 , css를 이용

속성 size : 7~1   7이 제일 큼. 

속성 color red

 

-meta태그

<meta charset="utf-8">   charset(문자집합, 문자 규칙) : 웹브라우저가 저장방법이 utf-8라고 인식 해석함.

<meta name="description" content="생활 코딩의 소개자료"> : 내용의 요약

<meta name="keywords" content="코딩,conding,생활코딩,html,css,javascript"> 

<meta name="author" content="miseong"> 저자

<meta http-equiv="refresh" content="30"> 30초 간격으로 리프레시됨. 

 

-semantic 의미론적인 태그

 

<article> 본문

<aside>  페이지 내용과 관계적은내용

<section> 문서 구획정의(hearder, footer 와 달리 역할을 분명하기 정하기 어려움) 

<figcaption>  삽화 다이어그램 설명

<figure> 삽화 다이어그램 부과적 요소

<figure>

  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure> 

<footer> footer 섹션

<header> 헤더 섹션.

<main>  문서에서 가장 중심이 되는 컨텐츠를 정의

<mark>  참조나 하이라이트 표시를 필요로 하는 문자를 정의 

<nav>    네비게이션 섹션

<details>

<summary> 요약

 <details>

  <summary>Copyright 1999-2014.</summary>

  <p> - by Refsnes Data. All Rights Reserved.</p>

  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

<time>    시간을 정의 

 

 

4. 검색엔진 최적화 (SEO: search engine optimization)

- 검색엔진이 잘 검색할 수 있도록, 상위에 노출 될 수 있도록 함

 

https://opentutorials.org/module/1892/10995

http://static.googleusercontent.com/media/www.google.com/ko//intl/ko/webmasters/docs/search-engine-optimization-starter-guide-ko.pdf

1. (기초)명확하고 독창적인 타이틀의 사용, descripttion 메타태그 활용

2. (사이트 구조 개선 )페이지  url 구조 개선, 사이트 내에서 이동하기 쉽게하기

3. (콘텐츠 최적화)적합한 태그 사용

4. (검색 로봇에 대한 대처)검색엔진에 노출되지 않았으면, 노출되었으면 : 원하는 형식으로 검색되도록함

5. (모바일을 위한 최적화)Google 에게 모바일용 사이트 알리기

6. (사이트 홍보와 분석) 웹마스터 도구 활용. 

 

Point1. 타이틀 문서안 or li 태그안 동일 문구가 있을 때  타이틀에 있을 때 먼저 노출시킨다. 

Point2. 메타태그 description. 1,2문장 짧은 단락 사용. 

Point3. URL  어떤 콘텐츠에 도달할 수 있는 유일한 정보. >> 알아보기 좋은 주소로 만든다. >> 어떤 콘텐츠인지 한번에 알수있도록 함. 

    피해야 할것 : 불필요한 매개변수, 세션아이디가 있는 url 사용 , 

                      page1 일반적인 페이지 이름, car-seat-cart-seqt:이름이 너무길거나, 반복사용

                     복잡한 디렉토리

Point4. 특정 문서에 도달하기 위한 한가지 형태의 url 사용

   - <link ref="canonical" href="http://localhost/1.html"/> 캐노니컬 : 해당 페이지는 href 내용과 같아. 

   - 301 리다이렉션 

Point5. 사이트 내에서 이동하기 쉽게 만들기. 

  - 크롤링할 때 어떤기준으로 다니는가? 링크들이 잘 작성되어 있어야. 

 - 하위 페이지에 '사이트 이동경로' 링크가 표시됨

     홈페이지>제품구성>렌트용>신생아용

 - 사용자가 url 의 일부를 제거하는 경우 발생할 상황을 고려합니다. 

point6.  사이트 내 쉬운 이동을 위한 권장사항

 - 자연스러운 계층구조

 - 링크(하이퍼텍스트)를 통해 이동하게 함. 

    콤보박스(select) 사용시 자바스크립트를 사용하면 검색엔진은 어떤웹사이로 이동하는지 파악하기 어려움. 

    <select onchange=" 자바스크립트 사용"> 

point7 : 우수한 품질의 콘텐츠와 서비스 제공:  검색엔진이 아닌 사용자를 위한 콘텐츠 작성

- 링크

 

point8 : 앵커 텍스트를 위한 권장 사항

 - 내용을 함축하는 텍스트 선택. :" 페이지", "문서", "여기를 클릭" 과 같은 일반적인 앵커텍스트 사용

 - 페이지URL을 대부분의 앵커텍스트 사용. 

 - CSS 사용시 링크라고 인식되도록 만들것.  : 정보로서 가치 떨어뜨림. 

    cf) text-decoration:none;    밑줄사용않함. 

- 이미지와 제목

point9 :  <img src="" alt""> 이미지 깨질떄 alt(alternative, 대안 태그 )

point10 : 루트 > images  : 일반적인 경로에 이미지 저장하면좋다. 

point11: 이미지에 명확하게 이름으로 사용. 

- robotstxt & stiemap

point12 :  robots.txt : 로보츠.텍스트 효과적으로 사용하기

 

http://www.naver.com/robots.txt

User-agent: * Disallow: / Allow : /$

::: 모든 웹페이지에대해 어떠한 로봇접근을 허용하지 않는다.

robots : 네트워크를 통해 접속하는 소프트 웨어. 

 

https://www.google.com/robots.txt

User-agent: * Disallow: /search Allow: /search/about Allow: /search/static Allow: /search/howsearchworks Disallow: /sdch Disallow: /groups Disallow: /index.html? Disallow: /? Allow: /?hl= Disallow: /?hl=*& Allow: /?hl=*&gws_rd=ssl$ Disallow: /?hl=*&*&gws_rd=ssl Allow: /?gws_rd=ssl$ Allow: /?pt1=true$ Disallow: /imgres Disallow: /u/ Disallow: /preferences Disallow: /setprefs Disallow: /default

 

5. HTML5

 

FORM ::  사용자가 sever 쪽으로 사용하기 위해 사용하기 위한것 (https://opentutorials.org/module/1892/11038)

<< type >>>

: color, date, datetime(현재 미사용, 국제표준시), datetime-local(현재 미사용, 현재있는 시간), 

        email, month, number, range(숫자범위 1~10 슬라이드 이동), search(검색 입력창, 표시), tel, time, url, week

- 모바일의 입력

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

 width=device-width  디바이스 폭만큼

 initial-scale=1 모바일 화면줌.  화면축소, 확대 하지 않은상태로 웹페이지 시작. 

- type =number 타입의 경우 숫자를 입력할때 숫자 키보드를 켜줌. ;; 사용자 입력 정보를 강제할 수 있다. 

<input type="number" min="10" max="15">

- type=submit 클릭시 input 에 강제로 다른 경우를 넣어도 진행되지 않음.

<input type="number" min="10" max="15">

<input type="submit">

-type= date, month, week, time

date : 년월일

month: 년월

week: 몇년도 몇번째 주 

time : 년도 시간

- type=search

검색할 때 쓰는 것이라는 것을 명확하게씀. 

-type=range

슬라이더 생김

-type=email, url

이메일, url 입력시 유용한 키보드 출현

<< 새로운 속성 >>>

autocomplete : form 태그에 있는 모든 입력칸이 자동활성 됨. 

placeholder: 미리 보기 

autofocus :웹페이지가 열렸을 때 사용자 커서가 첫번째 입력양식에 포커싱 되도록

required  필수값

pattern  정규식

<form action="/A"  autocomplete="on">

   <input type="text" name="id" placeholder="아이디를 입력해주세요" autofocus required pattern="[a-zA-Z]">

   <input type="이메일" placeholder="이메일을 입력해주세요">

   <input type="password" name="password" autocomplete="off">

   <input type="submit">

</form>

* 정규식

[a-zA-Z]            알파벳 1글자

[a-zA-Z][a-zA-Z] 알파벳 2글자

[a-zA-Z].           첫자만 알파벳 모든문자 한글자. 

[a-zA-Z].+         첫자만 알파벳 두글자 이상의 모든물자. 

[a-zA-Z].+[0-9]   첫자 알파벳 마지막글자 숫자 세자 이상. 

 

nbsp 뜻 ---  &nbsp;  NO-BREAK SPACE. 

'Web' 카테고리의 다른 글

[1028 intellij]  (0) 2021.05.06
[1028 도메인설정] 호스팅케이알 도메인/ 서브도메인/이메일 도메인  (0) 2021.05.02
[1028 운영] 운영 정보 모음  (0) 2021.05.02
[1028 shell script] 작성해본 기능 정리  (0) 2021.05.02
[1028 코딩] 코딩팁 모음  (0) 2021.05.02

    티스토리툴바