<!DOCTYPE html>
<!--html5언어로 작성 선언문 웹브라우저 크롬,익스플로러 등 인식-->
<html>
    <!--html 문서 시작-->
    <head> 
    <!--헤드 영역 시작-->
        <meta charset="utf-8">
         <!--문자를 유니코드 문자 사용(한국어,중국어,일본어)-->
        <title>MARANATHA</title>
         <!--즐겨찾기,검색엔진 검색 중요한 의미있는 단어-->
    </head>
    <!--헤드 영역 마침-->


    <body>
    <!--본문 시작-->
         <h1>welcome to maranatha home</h1>
           <!--제목 글자 h1가장큰글자-->
   
         <a href="sample.html">MARANATHA</a>
         <br>
         <br>

           <!--하이퍼링크 : 페이지연결--> 
         <a href="attribute.html">즐겨찾는 페이지</a>
           <!--하이퍼링크 : 페이지연결-->
          <img src="photo.jpg" alt="인물사진" title="인물사진"width="500" height="400">
            <!--이미지 태그 단독으로 사용 종료/ 태그 없음-->
            < !--img src="경로" alt="시각 장애인접근성, 필수 이미지가 안보일때 글자로 표시"  title="마우스올렸을때 설명글"-->
    </body>
     <!--본문 마침-->
</html> 
<!--html 문서 마침-->




     
        
        MARANATHA
    
    
        
        

welcome to maranatha home

MARANATHA

즐겨찾는 페이지

감사합니다
[&무료이미지 제공 싸이트]

https://pixabay.com/ko/

https://unsplash.com/

http://www.freeqration.com/featured/

https://www.sitebuilderreport.com/stock-up

http://www.allowto.com/

https://www.vecteezy.com/

[무료아이콘 제공 싸이트]

https://www.flaticon.com/

[무료 글꼴 제공 싸이트]

http://hangeul.naver.com/

https://www.dafont.com/

https://www.fontsquirrel.com/

'IT' 카테고리의 다른 글

HTML  (0) 2018.08.30
워드프레스 사이트맵  (0) 2018.08.21
무료 호스팅의 최강자 깃허브 Git Hub!!!  (0) 2018.08.07

'IT' 카테고리의 다른 글

HTML  (0) 2018.08.30
무료이미지제공사이트  (0) 2018.08.25
무료 호스팅의 최강자 깃허브 Git Hub!!!  (0) 2018.08.07

 Won's Factory 


HTML의 기본 문법 (Basic HTML Grammar)

기본 문법의 표준이라는 뜻은 정해놓은 규칙이나 절차라는 의미입니다.

웹 표준을 준수한다는 의미는 '정해진 규칙을 잘 치켜서 마크업(makr-up)한다라는 의미입니다.


중요한 용어에 대해서 잠깐 설명을 해보겠습니다.

<P> , <spen> , <a> 등과 같은 명령어의 형태가 <>(각괄호)안에 들어가 있을 때 이런 문장들을 [Tag]라고 합니다.

<P>~</P>와 같은 태그[Tag]의 시작과 끝에는 <>으로 시작해서 </>로 끝나게 되어 있습니다.

이러한 각 괄호 안에 들어가 있는 <>~</>를 요서[element]라고 합니다.


XHTML 문법의 규칙은 다음과 같습니다.


요소는 정확하게 중첩되어야 합니다.

<p> 중첩된 요소가 있을때 <strong>정확하게</strong>표현해야 합니다.</p>..............................................[o]
<p> 중첩된 요소가 있을때 <strong>정확하게</p>표현해야 합니다.</strong>..............................................[x]
마지막에 정의한 태그[Tag]를 가장 먼저 닫아야 합니다.


요소 및 속성 이름은 소문자로 표기합니다.

<p><a href="index.html">첫페이지</a></p>....................................[o]
<P><A HREF="index.html">첫페이지</A></P>.................................[x]

<a>요소에서 'href'를 속성[attribute]라고 합니다.

'='다음에 오는 것을 값[value]라고 표현합니다.

요소는 꼭 닫아서 마무리를 합니다.

<p> 요소는 꼭<strong>닫아서 마무리를</strong>해야합니다.</p>............................[o]
<p> 요소는 꼭<strong>닫아서 마무리를</strong>해야합니다........................................[x]
한 쌍의 태그[Tag]<>~</>형식의 요소로 이루어져 있지 않고 하나의 태그[Tag]로 되어 있는 요소도 있습니다.
이런 요소들을 '빈 요소[empty element]'라고 합니다.

자주 쓰이는 빈요소는 아래와 같고</>로 꼭 닫아주어야 합니다.
<br> , <hr> , <img> , <input> , <area> , <meta> , <link>.......</>

속성값에는 인용 부호를 붙여야 합니다.

<a href="index.html">첫페이지</a>...............................[o]
<a href=index.html>첫페이지</a>...................................[x]
간단하게 이해를 하자면 '=' 다음에 오는 문장들은 값이라고 하는데 이러한 값에는 인용부호를 붙여야 합니다.

속성은 속성값과 함께 사용해야 합니다.

<a href="index.html">첫페이지</a>...............................[o]
<a href>첫페이지</a>...........................................................[o]

속성은 항상 속성값과 함께 선언을 해야 하며 생략을 하면 안됩니다.

img와 area 효소에는 art 속성이 있어야 합니다.

<img src="img/mein.gif" alt="today"/>...................[o]
<img src="img/mein.gif" />...........................................[x]

<img>요소에 alt가 따라와 주어야 하는 이유는 문법적으로 필요하고 이미지를 볼 수 없는 성황에서도 충분히 그 이미지에 대한 정보를 제공해 주기 위해서 입니다. 이 부분은 뒤에 img요소를 설명할때 자세히 다루도록 하겠습니다.
중요한건 alt가 따라와주어야 한다는 것입니다. 

특수 문자를 사용할 때는 entity name 또는 entity code를 사용해야 합니다.

me &amp ; me</p>...........................[o]  &amp ;는 툭수문자 '&amp'는 특수 문자 '&'의 entity name 
me &#38 ; me </p>...........................[o]  &#38 ;는 특수문자 '&'의 entity code
me & me </p>.....................................[x]

주석처리 방법입니다.

주석은 일반적으로 협업, 공동작업이나 다음 작업자가 현재 작업 내용을 쉽게 알아 볼 수 있도록 도와주는 설명문형식의 문장입니다.
HTML편집기에서는 보이지만 브라우저 화면에 출력되지는 않습니다.
<!--주석 시작-->
<!--여기까지가


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



아래의 이미지들은 maranatha의 html 이미지 소스들입니다.

점선 긋기


아래 이미지 입니다.

HTML

<p>HTML</p><div class="txc-textbox" style="border-style: dashed; border-width: 1px; border-color: rgb(193, 193, 193); background-color: rgb(238, 238, 238); padding: 10px;"><p>

원본이미지-잘 찾아보면 중앙에 점4개짜리 이미지가 있습니다.






fkaqh

fm


 Won's Factory 
반응형 블로그에 들어가는 티스토리 글 양식입니다.

1 가나다라


2 마라나타


첨부된 파일을 다운 로드 받아서 사용하면 됩니다.

양식을 다운 로드 받은 후 txt를 html로 수정하면 윈도우 화면에서 확인을 할 수 있습니다.

티스토리서식.txt

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 


🐰🐇👫👍🎁

#굿정보

혹시 길을 가다가 시각장애인분들께서 이런 포즈를 취하시면 그냥 지나치지 말아주세요.

이 포즈는 시각장애인의 SOS신호입니다.

매우 곤란한 상황에 놓였을 시에 취하는 자세라고 하네요.

 오늘 처음 접해 본 소식입니다.
그래도 알아두면 도움을 필요로 하시는 시각장애인분들께 큰 도움이 될 수 있지 않을까?
많은 공유 부탁드려요.

'사회' 카테고리의 다른 글

김남국  (0) 2020.03.21
노회찬 정의당 원내대표 유서 전문  (0) 2018.07.24
노회찬의원 투신자살  (0) 2018.07.23
트럼프 기자회견 시작…세부 합의 설명  (0) 2018.06.12

중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리


이 이야기는 실화입니다.

또한 아는 사람도 많은 이야기입니다.

중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리

중중 장애를 앓고 있는 아들을 둔 한 늙은 아버지가 있었습니다.


전신 마비의 중증 장애가 있는 아들과 함께 철인 3종 경기를 완주한 미국 호이트 부자의 얘기가 전 세계 사람들을 감동시킨적이 있습니다.

그 아들의 소원은 철인 3종 경기에 나가는 것이었습니다.

중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리

사람들은 말했습니다.

"그런 일은 절대 불가능하다고....그것은 미친 짓이라고..."

아버지는 아들을 위해 그의 모든 것을 버리고

철인 3종 경기에 참가 했습니다.

중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리

아들이 할 수 있는 것이라곤 아버지가 끌어주는 보트나 자전거에 누워있는 것뿐이었습니다.

그리고 모두가 들어오고 한참이 지난 후에야 아버지와 아들이 들어옵니다.

사람들은 그 부자를 위해 끝까지 자리에 남아 그들을 

기립박수로 맞아 줍니다.


38년간 철인 3종 경기를 257차례 출전하며 장애인에 대한 편견을 깨기 위한 ‘도전’을 실천했다


땡큐 대디라는 영화로도 제작되었다.

당연히 스토리는 예고편만 봐도 다 아는 그런 내용인데 보는 동안 벅찬 감동이 밀려온다.

중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리중증 뇌성 마비 아들과 철인 3종 경기를 완주한 호이트 부자의 감동 스토리


4장 성부 성자와 성령

 성부 성자와 성령 영원히 

영광 받으옵소서

태초로 지금까지 

또 길이 영원 무궁 성삼위께 영광

아멘

  


MARANATHA TV 구독과 추천을 감사드립니다...ㅎㅎ



+ Recent posts