blogger SEO를 위한 심플(simple)하고 flexible한 html table 만들기

  블로그를 쓰다 보면,  html 테이블을 만드는 경우가 있다.   나는 구글  blogger를  이미 사용하고 있다.   html을 나모 웹 에디터 사이트에서 테이블을 만든 다음 그것을 복사 하면 태그가 매우 복잡해진다.  페이지 로딩 속도가 느려져  나중에 seo에 영향을 받는다.   

https://comp.namoeditor.co.kr/ce4/demo/namo/experience_write.jsp?code=01&tmp=

html style sheet 로 보기 좋은 table 만들기

  지금 나는  강의하기 위한 교재를 만들고 있다.  교재 또는 서적을 출판 하려고 할 때,  반드시 필요한 것이 있는데,  html style sheet 를 작성 하는 것이다.    즉 표를  이미지를 캡쳐 떠서 할 것이냐,  아니면,  html에 직접 그릴 것인지를 알아 보는 것인데,  나중에 소개 할 MailR에서는 반드시, html style sheet 가 필요하여,  아래와 같이 작성 한다.  

HTML 기초 TEXT 모음 강조체, 문단, 볼딕 이텔릭체 등...

  HTML TEXT   

HTML body, head & title 페이지

 HTML body와 head 페이지 구성

   html의  body와 head는 별도로 구성이 되어 있다.  body 부분은 windows 웹 브라우져 메인에 보여 주는 내용을 적는 것이고,  head는 별도로 내용을 적는다.    head  태그는  meta, title 이외의 style, script, link와 같은 태그를 포함 할 수 있다. 

아래의 예제는 body와 head를 나누어주는 것이다. 

html  코드 샘플

html 페이지 구조 설명

HTML  코드 구조

    html 구조는 Word 파일 구조와  같은 형태로 하면,  기본에서는 아주 깔끔하게 구성 된다.   아래는 HTML  기본적인 구조를 나타내는 것이다.  

 아래의 스크린에 보이는 화면과  html 을  glitch로  실습을 해보겠다.   헤드라인을 구성 하고 헤드라인에 대한 내용 그리고 세부 헤드라인과 세부 헤드라인의 구성을 아주 깔끔하게 나타낸다.   아래는 glitch에서 코드를 잘 다듬어 낸 코드 예제 이다.

 HTML 코드 샘플

<html>

  <body>

    <h1>

      This is the Main heading

    </h1>

    <p>

      this text might be an introdunction to the rest of the page. and if the

      page is a long one it might be split up into several sub-headings.

    </p>

    <h2>

      This is Sub heading

    </h2>

    <p>

      Many long ariticles have sub-heading so to help you flollow the structure

      of what is being written. there may even be sub-sub-headings (or

      lower-level headings).

    </p>

    <h2>

      Another Sub-Heading

    </h2>

    <p>

      here you can see another sub -heading

    </p>

  </body>

</html>

 HTML의 결과 

위와 같이 구조가 되는 코드를 작성 하였고 결과를 보았다.    구조적으로 보았을 때,  HTML이 큰 폭을 싸고  그 다음에는 <body>코드들이 안에   head 라인과 문단이 구성되어 있다.   매우 간단하지만 보기가 쉬운 페이지 이다. 

html & css 를 시작 하면서

   html & css는  필자가 별로 좋아하지 않는 것이다.  하지만,  블로그를 키우거나,  파이썬에서 웹크롤러를 잘 하려면,  html 이나  css 구조에 대해서 잘 알고 있어야 한다. 

이건은 급하게 서두를 필요가 없을거 같고,  정도를 걷는 것이 좋을 듯 하다.   정도를 걸을 려면, 아주 좋은 웹에디터가 있어야 하는데  아주 좋은 웹에디터를 찾았다.   

20년 전에 웹프로그래머 였던 나는 아직 까지 나모 웹에디터터나,  드림위버를  찾고 있었다.  그러다가 그냥 포기 해 버렸다.  

 그리고 다시 도전 하는 에디터를 아래  glitch 바꾸었다.   이것의 큰 장점은 코딩 하면서 결과를 바로 볼 수 있다는 것이다.   아마 다른 좋은 것도 있을 것인데,  일단 이걸로 정하였다. 

  그리고 교재도 정하였는데,   아래 것을 정하였다.   정말 천천히 나갈 것이다. 

우리 나라 서적도 한번 고려 해 보았는데,  기본적인 개념을 이해 하기는 원서를 보는 것이 매우 명확하고 좋다.    앞으로 한 단계  조금씩 하겠다.