Webベース1-HTML

21552 ワード

テキストリンク

ネットワーク・ベース・コースの内容

html 5:Webコンテンツの作成

css:Webスタイルの指定

評価課題

javascript:Webアクション

の作成

jquery, ajax

中間項目

ハイパーテキストタグ言語(HTML):Webページを記述するタグ言語
HTMLドキュメントを読んでWebページを作成します.
HTMLを使用した新しい標準HTML 5.
HTMLには、開始タグと終了タグがあり、その間に内容が記述されている.
(終了フラグがない場合があります.)
test1

<!doctype html>
<html>
 <head>
  <meta charset-"UTF-8">
  <title>첫번째</title>
  
  <!--<link rel="stylesheet" href="test.css">-->  
  <!--html 주석처리 -->
  
  <style>
  /* 스타일 내부에서 주석처리 */
  body{
	background : pink;
	color : white;
	font-size : 50px;
	font-weight : bold;
  }
  </style>
  
 </head>
 
 <body>
  Hello~~~^0^<br>
  안녕!<br>
  Bonjour!<br>
  Tout le monde~<br>
 </body>
 
</html>

:htmlタイプとして表示

改行、ラベルを閉じる必要はありません.
に!
造形方法
1.外部スタイル:.cssファイルとして保存します.
(同じ1,2,3,4スタイルを使用する場合)

rel(エンティティ)
.../(親フォルダ)

内部スタイル:現在のhtmlドキュメントに直接スタイル(headラベル)を作成する

<style> 내용 입력 </style>

background : 배경
color : 색상
font-size : 폰트크기
font-weight : 폰트굵기

test2

<!doctype html>

<html>
 <head>
   <meta charset="UTF-8">
   <title>두번째</title>
   <link rel="stylesheet" href="../css/mystyle.css">
   
   <style>
    body{
	  background : pink;
	}
	p{
	  background : lightgreen;
	  color : black;
	  font-size : 40px;
	  font-weight : bold;
	}
	
   </style>
   
 </head>

 <body>
    <!-- 설명문 -->
<pre>
&lt;p&gt; 태그는 문단을 나타내는 태그이다
한줄 전체를 차지하는 block요소이다
자동으로 줄이 바뀐다
</pre>
 
   <p>html : 웹페이지의 내용을 작성합니다 </p>
   <p>css : 웹페이지의 스타일을 지정합니다 </p>
   <p>javascript : 웹페이지의 동작을 구현합니다 </p>
 </body>

</html>

タグ
段落の前後に空白行を付ける.

<p>이것이 하나의 단락입니다.</p>

ラベル
改行タグの強制

<p>여기는 <br>br태그를 사용하여 <br>줄을 바꾸었습니다.</p>

出力時
ここは.
brラベルの使用
改行しました.

タグ
プログラマが入力したように画面に表示されるタグ
私の書いたとおりに印刷します.
test3!doctype html>

<html>
  <head>
   <meta charset="UTF-8">
   <title>세번째</title>
   <link rel = "stylesheet" href="../css/mystyle.css">
   
   <style>
   p{
	  border : 2px solid green;
	  padding : 50px;
   }
   #p1{
	  background : lightgreen;
	  color : purple;
	  font-size : 40px;
	  font-weight : bold;
	  text-align : center;
	}
	#p2{
	  background : pink;
	  color : red;
	  font-size : 20px;
	  font-weight : bold;
	}
	#p3{
	  background : lightblue;
	  color : blue;
	  font-size : 2.5em;
	  font-style : italic;
	  text-align : right;
	}
	</style>  
	
  </head> 
  
  <body>
    <pre>
	태그를 열때 부가 정보를 부여할 수 있다
	부가정보를 속성이라 하고 속성이름 = "속성값"으로 기술한다
	id속성을 부여한 결과 
	&lt;p id="p1"&gt;
	&lt;p id="p2"&gt;
	&lt;p id="p3"&gt;
	
	id를 이용해 style을 지정할 수 있다
	#p1{} #p2{} #p3{}
	
	테두리 안쪽 여백지정
	padding-top :
	padding-left :
	padding-right : 
 	padding-bottom : 
	padding : 10px <!-- 위 아래 좌우 한꺼번에 여백주기-->
	
	</pre>
	
	<p id="p1">무궁화 꽃이 피었습니다 </p>
	<p id="p2">단풍이 울긋불긋 물들고 있어요</p>
	<p id="p3">우리는 열심히 공부 하고 있어요</p>
  </body>
  
</html>  코드를 입력하세요
border:枠線
border:2 px(線の太さ)ソリッド(線のタイプ)green(線の色);
->ソリッド(1字)2重(2線)破線(破線)破線(実線)
idを使用してstyleを指定する
木槿が花を咲かせたように
idを与えた後
styleで#p 1{背景:pink;}スタイルサイクル
text-align:テキストを整列(左、右、中)
h1~h6
タイトル(heading):Webページのタイトル
h 1->h 6のフォントが小さいほど.
その他のテキスト形式
<b></b> 볼드체로 만든다.
<i></i> 이탤릭체로 만든다.
<strong></strong> 텍스트를 강하게 표시한다.
<em></em> 텍스트를 강조한다.
<sup></sup>위 첨자
<sub></sub>아래첨자
<hr> 수평선을 그릴 수 있다.
特殊文字
「<」や「>」などの文字を画面に表示する必要があります.&nbsp; 공백문자 한 개
&lt; <
&gt; >
&quot; "
&amp; &


                                    
                                    
                                    
                                    
                                

                                

                                
                                    

                                        


                                            
                                            Reference
                                            

                                            この問題について(Webベース1-HTML), 我々は、より多くの情報をここで見つけました
                                                
                                                https://velog.io/@hazel_jo/웹기초-1강-lvn8wjmt
                                            
                                            
                                            
                                            
                                                テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
                                            


                                            
                                            
                                                
                                                    Collection and Share based on the CC Protocol

Webベース(12)

さいこうを求める