배터리 및 전력 소비 

HTML로 아름다운 글꼴을 만드는 방법: 크기, 색상, HTML 글꼴 태그. HTML 텍스트의 물리적 형식 지정 태그

텍스트 서식 지정 - 글꼴 스타일을 선택하고 효과를 사용하여 텍스트 모양을 변경하는 등 텍스트를 변경하는 것을 의미합니다. 테이블에 1에는 텍스트 디자인을 변경하는 데 사용되는 기본 태그가 나열되어 있습니다.

테이블 1. 텍스트 서식 지정을 위한 태그
HTML 코드 설명 예
텍스트 굵은 텍스트 텍스트
텍스트 기울임꼴 텍스트 스타일 텍스트
텍스트 어깨 기호 전자=MC 2
텍스트 아래첨자 H2O 
텍스트
 텍스트는 모든 공백을 포함하여 있는 그대로 작성됩니다. 텍스트
텍스트 기울임꼴 텍스트 텍스트
텍스트 굵은 텍스트 텍스트

모든 텍스트 서식 지정 태그는 서로 결합하여 사용할 수 있습니다. 텍스트를 굵게 및 기울임꼴로 만들려면 태그 조합을 사용하세요. 그리고 (예 1). 이 경우 순서는 중요하지 않습니다.

예 1: 굵은 기울임꼴 텍스트

텍스트

마치 그 사람이 잘려나간 것 같아 결석, 그의 상대와는 달리 금욕적이고 움직이지 않습니다. 정신과 활력그 안에서 성취된 완전. 그러나 문제는 누구도 감히 그의 도전을 받아들이지 않는다는 것이다.



이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 이탤릭체 굵은 글씨의 종류

태그 사용 그리고 기준선을 기준으로 텍스트를 이동하고 글꼴 크기를 줄입니다(예 2).

예 2: 아래첨자 만들기

텍스트

에메랄드 공식: BE 3알 2(SiO 3)6



이 예의 결과는 그림 1에 나와 있습니다. 2.

쌀. 2. 본문의 아래첨자

태그 그리고 태그와 동일한 기능을 수행합니다. 그리고 , 그러나 후자를 쓰는 것이 더 짧고, 더 친숙하고, 더 편리합니다.

태그는 다음과 같습니다. 그리고 , 게다가 그리고 완전히 동등하거나 상호 교환이 가능하지 않습니다. 첫 번째 태그 - 물리적 마크업 태그이며 굵은 텍스트를 설정합니다. - 논리적 마크업 태그이며 표시된 텍스트의 중요성을 결정합니다. 태그를 논리적 형식과 물리적 형식으로 나누는 것은 원래 출력 장치에 관계없이 HTML을 보편적으로 만들기 위한 것이었습니다. 이론적으로 예를 들어 음성 브라우저를 사용하는 경우 태그를 사용하여 형식이 지정된 텍스트 그리고 , 다르게 표시됩니다. 그러나 널리 사용되는 브라우저에서는 이러한 태그를 사용한 결과가 동일하다는 것이 밝혀졌습니다.

나는 상원의원 여러분에게 연설문을 쓰지 않도록 지시합니다.
하지만 당신 자신의 말로 말도 안되는 소리가 모든 사람에게 보이도록!
피터 1세.

현재, 텍스트를 HTML로정보를 전달하는 주요 방법입니다. 인터넷상의 대부분의 사이트는 텍스트 콘텐츠로 구성됩니다. 즉, 기술이 있으면 최소한 읽고 최대로 쓸 수 있다는 의미입니다(모든 농담에는 어느 정도 진실이 있습니다).

편집기에 텍스트를 입력하고 서식을 지정했다고 가정해 보겠습니다(일부 단어를 강조 표시함). 용감한또는 이탤릭체) 또는 다른 작업을 수행했습니다. 그런 다음 텍스트를 복사하여 HTML 코드에 붙여넣었습니다. 에서 HTML 페이지를 열면 모든 서식이 어딘가에서 사라졌습니다. 이는 텍스트 편집기가 기본적으로 표시되지 않는 자체 특수 문자를 사용하여 텍스트 형식을 지정하기 때문에 발생합니다(본질적으로 텍스트 편집기에서만 사용되는 동일한 태그).

편집기 창에는 텍스트만 표시됩니다. 그러나 실제로 편집자가 특정 텍스트를 표시하는 방법을 "이해"하는 데 사용되는 특수 제어 문자도 있습니다. 즉, 이것은 텍스트 편집기에서 사용하기 위해 "맞춤형"으로만 사용되는 것과 동일합니다.

하지만 그럼에도 불구하고 편집기에서 텍스트를 전송하여 원래 형식으로 html 코드에 붙여넣는 방법이 있습니다. 이에 대해 이야기하고 있으므로 이 태그를 사용한 텍스트 형식에 대해 연구해 보겠습니다. 그럼 시작해 보겠습니다.

§ 2. 서식 지정 태그 자체

및 태그를 사용하여 미리 서식이 지정된 텍스트를 HTML 페이지에 삽입할 수 있습니다. 브라우저는 텍스트 편집기에 나타나는 것처럼 이러한 태그 사이에 포함된 텍스트를 표시합니다. 솔직히 저는 이 태그를 실제로 사용해 본 적이 없어서 더 이상 말씀드릴 수 없습니다.

텍스트 서식 지정에 가장 많이 사용되는 태그는 다음과 같습니다.

  • - 텍스트를 강조 표시하는 데 사용됩니다. 용감한.

  • - 받기 위해 사용됨 이탤릭체텍스트. 이 태그 대신 태그를 사용하는 것이 좋습니다.

  • - 허용할 것이다 강조하다텍스트. 여기서 가장 중요한 것은 사용자가 밑줄 친 텍스트를 링크와 혼동하지 않는다는 것입니다.

  • - 텍스트에 줄을 그어 지웁니다.

  • - 아래 첨자 텍스트(아래 첨자)를 강조 표시하도록 설계되었습니다. 이 태그는 예를 들어 화학식을 작성할 때 유용할 수 있습니다. 코드는 다음과 같습니다.

    H2O

    우리에게 다음 공식을 제공합니다


  • - 위 첨자 텍스트(위 첨자)를 강조 표시하는 데 필요합니다. 예를 들어, 지수를 작성하려면 다음과 같이 작성합니다.

    (a+b)2,

    우리는 얻는다

    (a+b) 2.


이러한 태그는 모두 한 번에 하나씩 또는 여러 개를 함께 텍스트 형식을 지정하는 데 사용할 수 있습니다. 이는 태그를 서로 중첩하여 달성됩니다. 예를 들어 다음 HTML 코드는 다음과 같습니다.

H2O는 물의 공식입니다.

시청할 때

H2O- 이것 물 공식.

§ 3. 단락

HTML에서는 단락을 사용하여 단락을 만듭니다. 이 태그를 사용하면 빈 줄 하나가 삽입되고 그 뒤에 보이는 HTML 페이지 요소가 다음 줄에 배치됩니다. 예를 들어, 다음과 같이 쓴다면:

그러면 다음과 같이 보일 것입니다:

브라우저는 다음 단락의 시작이 이전 단락의 끝을 의미한다고 간주하므로 닫는 태그를 사용할 필요가 없지만 혼동을 피하는 것이 좋습니다.

§ 4. 텍스트 정렬

텍스트를 정렬하려면 속성을 사용하십시오. 맞추다가능한 값으로 중앙, 왼쪽, 오른쪽그리고 신이 옳다고 하다. 따라서 텍스트를 가운데, 왼쪽, 오른쪽으로 정렬하고 동시에 두 가장자리에 정렬합니다. 예를 들어 HTML 코드는 다음과 같습니다.

align="center">텍스트 중앙 정렬

텍스트를 중앙에 정렬합니다.

가운데 텍스트

그리고 이 코드는:

그렇죠">

텍스트를 오른쪽으로 정렬합니다

텍스트를 오른쪽으로 정렬

속성이 맞추다사용되지 않으면 텍스트가 왼쪽 정렬됩니다. 이는 기본적으로 발생합니다. 예제 코드:

텍스트를 왼쪽으로 정렬합니다

기본적으로 텍스트는 왼쪽으로 정렬됩니다.

§ 5. 줄 바꿈 및 가로 막대

빈 줄을 삽입하지 않고 새 줄로 전환해야 하는 경우(텍스트 편집기에서 Enter를 누를 때 발생) 태그를 사용하세요.
. 예를 들어 HTML 코드

1. 첫 번째 줄.
2. 두 번째 줄.

브라우저에서는 다음과 같이 보일 것입니다:

1. 첫 번째 줄.
2. 두 번째 줄.

유
닫는 태그가 없습니다. 아마도 여러 개의 빈 줄을 삽입하려면 태그를 작성해야 한다는 것을 이미 짐작했을 것입니다.
연속으로 여러 번.

태그를 사용하여 텍스트의 일부를 시각적으로 구분할 수도 있습니다. 이 태그는 페이지에 구분 표시줄을 만듭니다(예: 이 문서 시작 부분의 녹색 표시). 태그에는 다음과 같은 속성이 있습니다.

  • 크기- 스트립 두께;

  • 너비- 선의 너비;

  • 맞추다- 정렬;

  • 색상- 스트라이프 색상;

  • noshade- 값이 없는 속성입니다. 지정하면 그림자가 없는 검정색 단색 막대가 생성됩니다.

예를 들어 HTML 코드는 다음과 같습니다.

align="center" size="5" width="50%" color="#3399ff">

브라우저에서는 다음과 같이 보일 것입니다

너비와 두께는 픽셀(값은 일정함)과 백분율(값은 화면 해상도에 따라 변경됨)로 지정할 수 있습니다.

§ 6. 제목

HTML에서 섹션과 하위 섹션의 이름을 설정하려면 다음을 사용하세요. 제목 태그. 제목에는 6가지 수준이 있으며 다음과 같이 지정됩니다.

  • - 첫 번째 수준 제목

  • - 두 번째 수준 제목

  • - 세 번째 수준 제목

  • - 네 번째 수준 제목

  • - 다섯 번째 수준 제목

  • - 여섯 번째 수준 제목

제목은 굵은 글꼴로 표시되며 나머지 텍스트와 빈 줄로 구분됩니다. 가장 큰 제목은 (이 강의 제목이 강조 표시됨)이고 가장 작은 제목은 입니다. 제목 태그에는 다음과 같은 속성이 있습니다.

  • 맞추다- 페이지의 제목 텍스트 정렬(값은 일반 텍스트 정렬과 동일함)

  • 제목- 제목 위에 마우스를 올리면 나타나는 툴팁입니다.

예를 들어 HTML 코드는 다음과 같습니다.

align="center" title="Tooltip. 제목 위에 마우스를 올리면 제목을 볼 수 있습니다.">Заголовок 4 уровня !}

브라우저에서는 다음과 같이 보일 것입니다:

레벨 4 헤더

§ 7. 글꼴 작업

글꼴 형식을 직접 지정하기 위해 HTML에는 태그가 있습니다. 이 태그에는 다음과 같은 속성이 있습니다.

  • 색상- 글꼴 텍스트 색상;

  • 얼굴- 글꼴 서체;

  • 크기- 글꼴 텍스트 크기. 절대값(1~6) 또는 상대값(+1~+6 및 -1~-6)으로 지정할 수 있습니다. 기본적으로 텍스트 크기는 3입니다. 크기="+1"
>인 경우 및 태그 사이에 있는 텍스트가 다른 텍스트보다 1씩 증가하여 표시됩니다. -1과 동일합니다.

§ 8. HTML로 목록 만들기

HTML에서는 및 태그를 사용하여 목록을 만듭니다. 첫 번째 경우에는 순서가 지정된(번호가 매겨진) 목록이 생성되고, 두 번째 경우에는 순서가 지정되지 않은(글머리 기호가 있는) 목록이 생성됩니다. 각 목록 요소는 태그로 강조 표시됩니다. 브라우저는 글머리 기호가 있는 들여쓰기 열로 새 줄에 목록 항목을 표시합니다. 마커 유형은 속성에 따라 결정됩니다. 유형.

번호가 매겨진 목록에서 표시자(유형 속성 값)는 다음과 같습니다.

  • 1 - 아라비아 숫자로 번호 매기기(기본값)

  • ㅏ- 알파벳 순서로 대문자 라틴 문자로 작성됩니다.

  • ㅏ- 작은 라틴 문자;

  • 나- 큰 로마 숫자;

  • 나- 작은 로마 숫자.

예를 들어 HTML 코드


첫 번째 요소.
두 번째 요소.
세 번째 요소.

브라우저에는 다음과 같이 표시됩니다.

Microsoft Word 또는 Microsoft Excel과 같은 워드 프로세서를 사용하는 경우 텍스트 형식과 텍스트를 굵게(굵게), 기울임꼴(기울임꼴), 취소선 또는 밑줄로 표시하는 방법을 잘 알고 있어야 합니다. 이는 HTML 및 XHTML에서 텍스트 형식을 지정하는 방법을 나타내는 11개의 사용 가능한 옵션 중 4개에 불과합니다.

굵은 텍스트 또는 굵은 텍스트

두 개의 태그를 사용하여 HTML의 굵은 글꼴 또는 굵은 글꼴을 설정할 수 있습니다. ... 그리고 ... . 태그에 있는 모든 것 ...그리고 ...아래와 같이 HTML에서 굵은 텍스트(bold)로 표시됩니다.

예

HTML의 텍스트 및 글꼴을 굵게 표시하는 예

b 태그를 사용하여 우리는 볼드체.

우리가 사용하는 강력한 태그를 사용하여 굵은 글씨의 텍스트.



우리는 다음과 같은 결과를 얻습니다.

기울임꼴 - 기울임꼴 텍스트 또는 글꼴

두 개의 태그를 사용하여 HTML에서 텍스트를 기울임꼴로 만들 수 있습니다. ... 그리고 ... . 기울임꼴 태그의 모든 항목 ...그리고 ...아래와 같이 HTML에서 기울임꼴 텍스트(글꼴)로 표시됩니다.

예

HTML의 텍스트 및 글꼴 기울임꼴 예

i 태그를 사용하여 우리는 기울임꼴 텍스트 또는 글꼴.

em 태그를 사용하여 우리는 이탤릭체로 된 텍스트.



우리는 다음과 같은 결과를 얻습니다.

밑줄 친 텍스트

태그를 사용하여 HTML의 텍스트에 밑줄을 긋을 수 있습니다 ... ...아래와 같이 밑줄이 그어진 텍스트(글꼴)로 HTML에 표시됩니다.

예

HTML의 텍스트 밑줄 예

u 태그를 사용하여 우리는 밑줄 친 텍스트 또는 단어.



우리는 다음과 같은 결과를 얻습니다.

취소선 텍스트

태그를 사용하여 HTML에서 텍스트를 취소할 수 있습니다. ... . 태그 안에 있는 모든 것 ...아래와 같이 취소선 텍스트(글꼴)로 HTML에 표시됩니다.

예

HTML의 취소선 텍스트 예

우리가 하는 경고 태그를 사용하여 취소선 텍스트.



우리는 다음과 같은 결과를 얻습니다.

고정 폭 글꼴

요소 내용 ... 고정 폭 글꼴로 HTML로 작성되었습니다. 문자마다 너비가 다르기 때문에 대부분의 글꼴에는 가변 너비가 있습니다(예: 문자 "у"가 문자 "r"보다 넓습니다). 그러나 고정 폭 글꼴에서는 각 문자의 너비가 동일합니다.

예

HTML의 고정폭 글꼴 예

tt 태그를 사용하여 우리는 고정 폭 글꼴.



우리는 다음과 같은 결과를 얻습니다.

어깨 기호

태그 내용 ... HTML에서는 위 첨자로 표시됩니다. 위 첨자 태그 HTML에서는 주변 문자와 글꼴 크기가 같지만 높이는 절반만 사용합니다. 이 요소는 예를 들어 HTML에서 숫자의 거듭제곱을 작성해야 하는 경우에 매우 적합합니다.

예

HTML의 위 첨자의 예

sup 태그를 사용하여 상단을 만듭니다. 색인또는 숫자의 거듭제곱(예: 2) 3.



우리는 다음과 같은 결과를 얻습니다.

아래첨자

태그 내용 ... HTML의 아래 첨자로 나타납니다. 아래 첨자 태그 HTML에서는 주변 문자와 글꼴 크기가 같지만 높이는 절반만 사용합니다.

예

HTML의 아래첨자의 예

하위 태그를 사용하여 하단을 만듭니다. 색인.



우리는 다음과 같은 결과를 얻습니다.

붙여넣은 텍스트

태그 내부의 콘텐츠 ... 붙여넣은 텍스트로 HTML에 표시됩니다.

예

HTML에 붙여넣은 텍스트의 예

나는 돈을 벌고 싶다 많은 너무 많아돈.



우리는 다음과 같은 결과를 얻습니다.

삭제된 텍스트

태그 내부의 콘텐츠 ... HTML에서는 삭제된 텍스트로 나타납니다.

예

HTML에서 삭제된 텍스트의 예

나는 돈을 벌고 싶다 많은 너무 많아돈.



우리는 다음과 같은 결과를 얻습니다.

큰 텍스트

태그 내용 ... HTML에서는 아래와 같이 주변 텍스트의 나머지 부분보다 글꼴 크기가 한 단계 더 큰 큰 텍스트로 표시됩니다.

예

HTML의 큰 텍스트 예

우리가 하는 큰 태그를 사용하여 문자를 더 보내세요.



우리는 다음과 같은 결과를 얻습니다.

작은 텍스트

태그 내부의 콘텐츠 ... HTML에서는 아래와 같이 주변 텍스트의 나머지 부분보다 글꼴 크기가 한 단계 작은 작은 텍스트로 표시됩니다.

예

HTML의 작은 텍스트 예

우리가 하는 작은 태그를 사용하여 텍스트가 더 작습니다.



우리는 다음과 같은 결과를 얻습니다.

HTML에서 요소 및 페이지 콘텐츠 그룹화

강요

그리고 HTML의 여러 요소를 그룹화하여 페이지의 섹션 또는 하위 섹션을 만들 수 있습니다.

예를 들어 페이지의 모든 링크를 태그에 넣을 수 있습니다.

이 태그의 모든 요소가
메뉴를 참고하세요. 그런 다음 태그 스타일을 지정할 수 있습니다.
특수한 스타일 규칙 세트(CSS)를 사용하여 요소가 렌더링됩니다.

태그가 있는 예

기사 제목

페이지 내용...



우리는 다음과 같은 결과를 얻습니다.


반면에 요소는 인라인 요소만 그룹화하는 데 사용할 수 있습니다. 그래서 문장이나 문단(단락)의 일부를 결합하고 싶은 부분이 있으면 요소를 이용하면 됩니다. 다음과 같은 방법으로:

태그가 있는 예

HTML의 요소 및 텍스트 그룹화 예

다음을 사용하여 요소 그룹화 스팬 태그.



우리는 다음과 같은 결과를 얻습니다.

이러한 태그는 일반적으로 CSS와 함께 사용되어 페이지 섹션의 스타일을 지정할 수 있습니다.

안녕하세요, 블로그 독자 여러분! 이 기사에서는 다음에 대해 이야기합니다. 텍스트 서식 지정 태그. 대표적인 예로는 텍스트를 굵게 또는 기울임꼴로 만드는 것이 있습니다. 또한 일부 태그가 내부 웹사이트 최적화에 미치는 영향과 태그 작성 규칙도 살펴보겠습니다. 해당 기사에서 이에 대해 읽을 수 있습니다. 그런데 Word와 같은 많은 텍스트 편집기에서 유사한 텍스트 디자인 요소를 찾을 수 있습니다.

태그는 블록형과 인라인형의 2가지 유형으로 나뉩니다. 전자를 사용할 경우 텍스트의 일부(줄, 개별 조각 또는 단어)의 내용을 변경할 수 있으며 후자는 입니다. 이 문서에서 살펴볼 서식 지정 태그는 주로 소문자입니다.

태그 작성 규칙 및 순서

당신은 이미 여는 태그와 닫는 태그가 무엇인지 알고 있습니다. 그렇지 않다면 이 자료의 시작 부분에 있는 기사를 읽어 보십시오. 즉, 태그에는 단일(예: 새 줄)이라는 두 가지 유형의 태그가 있습니다.
) 및 컨테이너(쌍)입니다. 따라서 모든 텍스트 서식 지정 태그는 짝을 이루는. 즉, 모든 요소에는 여는 태그와 닫는 태그가 있으며 강조 표시는 그 사이에 배치되어야 합니다. 예를 들어, 올바른 문구 선택은 다음과 같습니다. 선택된 조각

브라우저가 이 조각을 처리하면 다음 텍스트가 표시됩니다. 선택된 조각.그런데 RSS 피드()에는 모든 태그가 표시되지 않습니다.

태그를 작성할 때 가장 중요한 것은 태그를 닫는 것을 기억하는 것입니다. 그렇지 않으면 페이지의 모든 텍스트가 굵게 강조 표시됩니다(태그가 포함된 예에서는 ). 하지만 동시에 특정 부분을 굵은 글꼴과 기울임꼴로 강조 표시해야 하는 경우가 있습니다. 하지만 이 작업을 수행하는 태그가 없습니다. 이 상황에서 벗어날 수 있는 방법은 단 하나뿐입니다. 동시에 두 개의 태그를 사용하는 것입니다. 어떤 순서로 사용하는지는 중요하지 않습니다. 따라서 다음과 같은 태그를 사용하여 텍스트를 작성합니다.

선택된 조각

또는 다음과 같습니다:

선택된 조각

당신은 여전히받을 것입니다 선택된 조각 이탤릭체와 굵게 동시에. 그러나 처음에는 이 옵션이 유일하고 올바른 옵션이었으므로 첫 번째 옵션을 사용하는 것이 좋습니다. 또한, 설정에 따라 브라우저마다 태그를 다르게() 처리할 수 있다는 점도 잊지 마세요. 이제 서식 태그 자체에 대해 살펴보겠습니다.

굵은 기울임꼴 텍스트 - 태그 , , 그리고

가장 많이 사용되는 텍스트 서식 지정 태그 - 강조 표시 용감한그리고 이탤릭체. 일반적으로 조각에 중요성을 부여하는 데 사용됩니다. 첫 번째 사례는 유용한 정보나 키워드가 포함된 부분을 강조하는 역할을 합니다. 이탤릭체는 굵은 텍스트와 같은 목적으로 사용되지만, 굵은 텍스트보다 본문 텍스트의 배경에서 이탤릭체가 덜 눈에 띄기 때문에 정보의 중요성이 덜합니다.

먼저 생각해 보자 텍스트를 굵게 만들기. 이 작업에는 두 가지 태그가 사용됩니다. 그리고 . 겉모습에는 차이가 없습니다. 그러나 각 브라우저는 각 요소를 다르게 해석할 수 있으므로 차이점을 확인할 수 있습니다. 태그의 텍스트는 다음과 같습니다. 그리고 브라우저에서 이미 처리된 양식으로:

태그의 텍스트가 강함

b 태그의 텍스트

페이지의 소스 코드에서 이 두 줄은 다음과 같습니다.

태그의 텍스트가 강함 b 태그의 텍스트

의 경우에도 동일한 상황을 관찰할 수 있습니다. 기울임꼴 태그 그리고 . 두 예의 차이점을 찾아보세요.

em 태그의 텍스트

태그 안의 텍스트 I

소스 코드는 다음과 같습니다.

em 태그의 텍스트 태그 안의 텍스트 I

따라서 고려되는 볼드체 및 이탤릭체 태그는 실제로 다르지 않지만 예를 들어 태그가 필요한 이유는 무엇입니까? 만약 거기에 ? 결국 후자는 단 하나의 문자(괄호는 포함하지 않음)만 포함하므로 작성하기가 더 쉽습니다. 그리고 요점은 태그가 그리고 영향 . 키워드를 이러한 태그로 둘러싸면 웹사이트 홍보에 유익한 효과가 있습니다. 가장 중요한 점은 무리하지 않는 것입니다. 텍스트에는 태그에 최대 5%의 굵은 텍스트가 포함되어야 합니다. , 태그에 이탤릭체 양이 동일함 .

텍스트의 특정 지점만 강조 표시하려면 태그를 사용하세요. 또는 . 일반적으로 검색 엔진도 이러한 태그의 텍스트를 더 중요하게 생각한다고 생각합니다. 내부 최적화아직은 그 영향력이 덜해요 그리고 .

선으로 텍스트를 강조하기 위한 태그 - , 그리고

이제 텍스트 디자인에서 대시를 사용하는 몇 가지 태그를 살펴보겠습니다. 여러분이 알고 있는 가장 유명한 텍스트 편집기는 다음과 같습니다. 꼬리표 또는 밑줄. 이 태그는 (내가 아는 한) 순위에 영향을 미치지 않지만, 일부 텍스트를 강조 표시하고 이에 주의를 집중하면 도움이 될 것입니다. 바로 위에 이 태그를 사용하는 예를 들었습니다.

목적이 비슷한 두 개의 태그가 더 있습니다. 그리고 . 둘 다 텍스트를 강조하는 기능을 수행합니다. 어떤 상황에서도 이 태그를 사용할 수 있습니다. 문서(또는 문서의 일부)를 업데이트하는 경우 이전 문서에 줄을 그어 지우고 새 문서를 추가할 수 있습니다. 자료의 주제에서 벗어나는 글을 쓰려고 한다면; 도덕적, 윤리적 기준에 부합하지 않는 것.

이 두 태그의 차이점은 글쓰기, 결과적으로 첫 번째 것을 사용하는 것이 바람직합니다. 첫째, 작성하는 것이 더 편리하고, 둘째, 페이지에 HTML 코드가 적게 포함되어 검색 엔진이 이를 좋아합니다.

꼬리표 및 속성 - 텍스트 글꼴 매개변수

이제 속성 없이는 사용되지 않는 태그를 생각해 보세요. 이를 사용하면 특정 텍스트에 대한 매개변수를 설정할 수 있습니다. 일반적으로 이제는 (계단식 스타일 시트)를 사용하는 것이 더 좋습니다. 왜냐하면... 이를 사용하면 페이지의 전체 HTML 코드를 크게 줄일 수 있습니다. 그럼 동일한 태그를 살펴보겠습니다. . 그에게는 모든 것이 존재한다 세 가지 속성:

  • 얼굴- 글꼴 자체. 예를 들어 Arial, Courier 또는 Verdana가 있습니다. 여러 개를 나열할 수 있습니다. 모든 사용자가 광범위한 글꼴 세트를 갖고 있는 것은 아니며, 얼굴 속성에 여러 글꼴을 작성하면 브라우저는 사용할 글꼴 또는 시스템에 존재하는 글꼴을 선택할 수 있습니다.
  • 크기— 텍스트 크기를 나타내는 속성입니다. 기존 단위와 픽셀 모두로 표현할 수 있습니다.
  • 색상- 텍스트 색상. 이 속성은 HTML 색상 코드와 단어 코드 모두에서 사용할 수 있습니다. 첫 번째 항목은 #FFFFFF(여기서 F는 A부터 F까지의 숫자 또는 문자) 형식이고, 두 번째 항목은 간단한 단어(예: 빨간색)로 작성됩니다.

태그의 텍스트는 다음과 같습니다. 각 속성을 사용하여:

이 텍스트는 6px입니다. 


이 텍스트는 빨간색입니다.


이 텍스트는 Arial 글꼴입니다.


이 텍스트는 빨간색이고 크기는 5px입니다.

작성된 코드를 처리한 후에는 다음과 같은 내용을 보게 됩니다. 


블록 텍스트 디자인 요소 - 제목 
-
, 단락 


마지막으로 거의 모든 문서에서 사용되는 블록 요소를 살펴보겠습니다.  제목과 단락 태그가 있습니다.  첫 번째를 고려해 봅시다.  제목에는 6가지 유형이 있으며 각각 고유한 태그가 있습니다.  각 유형에는 고유한 일련 번호만 있으며 태그를 사용하여 기록됩니다. 
, 
,..., 
.  처리 시 모든 헤더의 모양은 다음과 같습니다.




단어 제목 뒤의 숫자는 태그의 숫자에 해당합니다. .  제목은 페이지 최적화에 큰 영향을 미치므로 태그로 묶습니다. 키워드.  이 사례에는 몇 가지 특징이 있는데, 이에 대해서는 후속 기사에서 설명하겠습니다.


이제 단락 강조 태그에 대해 이야기하겠습니다. 
이 태그의 기능은 다른 동일한 텍스트와 빈 줄 사이의 텍스트를 구분하는 것입니다.  문서의 소스코드를 보면 다음과 같은 내용을 볼 수 있습니다.




녹색 직사각형에는 하나의 단락이 포함되고 빨간색 직사각형에는 다른 단락이 포함됩니다.  브라우저에서 처리한 후 이 코드는 다음과 같습니다(화살표는 빈 줄을 가리킴).




결과적으로 한 단락이 다른 단락과 상당히 눈에 띄게 분리되어 유익합니다. 읽기가 더 편리해집니다.


이것에 관한 기사가 끝났습니다. 문서 서식 태그.  이 자료에서 설명한 것보다 더 많은 것들이 있습니다.  그들 중 일부에 대해 많은 이야기가 필요하며 그 결과 전체 리뷰가 포함된 별도의 기사가 해당 항목에 전념하게 됩니다!


 
HTML 문서의 텍스트는 적절한 태그를 사용하여 형식이 지정됩니다.  표에는 문자 형식을 지정하는 데 사용되는 태그와 해당 태그가 생성하는 효과가 나와 있습니다.

텍스트 서식 지정을 위한 태그 
HTML 태그 효과 예

텍스트


굵은 글씨로 텍스트 쓰기
텍스트


텍스트


굵은 텍스트
텍스트


텍스트


이탤릭체로 텍스트 쓰기
텍스트


텍스트


텍스트의 중요한 부분 강조 표시(텍스트는 기울임꼴로 표시됨)
텍스트


텍스트


텍스트에 밑줄을 긋습니다
텍스트

텍스트


취소선 텍스트
텍스트

텍스트


어깨 기호
100m 2

텍스트


아래첨자
H2SO4

또한 다양한 글꼴 매개변수를 정의할 수 있습니다.  특히 태그를 사용하면 
...글꼴 서체, 글꼴 크기 및 색상을 설정합니다.  이 태그는 단일 태그이며 컨테이너 내부에 배치된 모든 텍스트에 영향을 줍니다.


  • 얼굴="값"- 글꼴 서체.  지정된 서체가 사용자의 컴퓨터에 없으면 텍스트는 기본 서체를 사용하여 서식이 지정됩니다.  속성에 있음 얼굴때로는 여러 서체를 쉼표로 구분하여 작성한 다음 브라우저가 목록에서 서체를 선택합니다. 첫 번째 서체가 없으면 두 번째 서체를 사용합니다. 속성 값은 따옴표로 묶어야 합니다. 
    예: 
    타호마
, 아리알 블랙


    결과: 
    타호마 아리알 블랙
    • 

  • 크기="값"- 글꼴 크기(1에서 7까지의 정수).  기인하다 크기빼기(또는 더하기) 기호가 있으면 글꼴 크기가 기본 크기에 비해 해당 양만큼 줄어들거나 늘어납니다.  부호 없는 값은 절대 글꼴 크기를 지정합니다. 
    예: 
    
1
...
7


    결과: 
    1
, 2
, 3
, 4
, 5
, 6
, 7

    • 

  • 색상="값"- 글꼴 색상.  색상 의미로는 다음과 같이 영어로 색상 이름을 사용할 수 있습니다. 빨간색, 녹색, 파란색등 또는 문자로 시작하는 16진수 값(16진수 표기법으로 작성) #
원하는 색상을 얻으려면 혼합해야하는 빨간색, 녹색 및 파란색 색상을 순차적으로 지정합니다.  후자가 더 바람직합니다. 첫 번째 경우 음영 선택은 클라이언트의 특정 브라우저 설정에 따라 달라지기 때문입니다!  예: 
    텍스트
, 텍스트


    결과: 
    텍스트, 텍스트
    • 

웹 사이트를 디자인하기 위해 일반적으로 이라는 색상 세트를 사용합니다.  216개의 요소로 구성되어 있습니다.  "안전한" 색상의 특징은 다른 브라우저나 다른 모니터에 표시될 때 변경되지 않는다는 것입니다. 즉, 이 팔레트는 웹 디자이너가 다른 모니터에서 의도한 바를 정확하게 표현하도록 보장합니다.  16진수 값의 세 가지 구성 요소 중 하나라도 다른 경우 00
, 33
, 66
, 99
, 봄 여름 시즌또는 FF, 그러면 색상이 안전하지 않습니다.  속성 값 크기그리고 색상따옴표 없이 작성할 수 있지만 규칙에 따라 모든 것을 수행하는 것이 좋습니다.


텍스트 매개변수를 변경하는 데 사용할 수 있는 다른 태그가 있습니다.


  • 텍스트- 글꼴 크기를 늘립니다.  현재 레벨에 비해 텍스트 문자의 크기가 1씩 증가합니다.
    • 

  • 텍스트- 글꼴 크기를 줄입니다.  심볼의 크기는 현재 레벨에 비해 1씩 줄어듭니다.
    • 

  • 텍스트- 줄이 그어진 텍스트를 만듭니다.  텍스트에 수평선이 그어져 표시됩니다.
    • 

  • 텍스트- 텍스트나 이미지를 사이에 텍스트가 있는 "크리핑 라인"으로 표시합니다.



    

    

                                


                                






                            

                        

                    
                    


                    




                
                



                
                    
                



            
            
        
        

        
            
        

        
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    

    
    

    
    
    
    
    
    
    
    
    
    
    
    


    
    

             
    
          질문이 있으신가요?
          
      
    

        
    

            
    
                
    
                    
    




                        
    


                            
    
                                
    
                                    
    
                                        
    
                                            
    
                                                
                                            
    
                                            
    
                                                
    
                                                    
                                                
    
                                            
    
                                        
    
                                    
    
                                
    
                                
    
                                    
    
                                        
    
                                            
    
                                                
                                            
    
                                            
    
                                                
    
                                                    
                                                
    
                                            
    
                                        
    
                                    
    
                                
    
                                
    
                                    
    
                                        
    
                                            
    
                                                
                                            
    
                                            
    
                                                
    
                                                    
                                                
    

                                            
    
                                        
    
                                    
    
                                
    
                                
    
                                    
    
                                        
    
                                            
    
                                                
                                            
    
                                        
    
                                    
    
                                
    
                            
    

                            
    
                                
    
                                    
                                
    
                            
    
                            
                        
    


                    
    
                
    
            
    

        
    
    
    


    

    
    
    
    
        
    
        
    
            
    
                
    
                    
    
                        
    오타 신고
    
                        
    
                            
    편집자에게 전송될 텍스트:
    
                            
    
                        
    
                    
    
                    
    
                        
    
                            
    
                            
                        
    
                        
    
                        
    
                    
    
                
    
                
    
                    보내다