>  기사  >  웹 프론트엔드  >  HTML이란 무엇입니까?

HTML이란 무엇입니까?

WBOY
WBOY원래의
2024-09-04 16:12:30752검색

하이퍼텍스트 마크업 언어(HTML)는 인터넷에 연결된 누구나 볼 수 있는 웹사이트를 만들 수 있는 언어입니다. 설문조사에 따르면 응답자의 55% 이상이 HTML을 사용한다고 답했습니다.

또한 HTML을 배우는 것은 일반적으로 웹 개발자 여정의 첫 번째 단계입니다. 평균 웹 개발자의 연간 수입은 $61,718이며, 최고 개발자의 수입은 $103,000를 넘습니다.

하이퍼텍스트는 다음 페이지로 이동하는 하이퍼링크라는 텍스트를 클릭하여 온라인에 접속하는 방법입니다.

HTML이란 무엇입니까?

주요 시사점

  • 기본 코드는 doctype 선언, HTML 태그, head 태그, title 태그, body 태그로 구성됩니다.
  • Windows, Mac, Linux 등 모든 OS와 Google Chrome, Mozilla Firefox, Safari 등 모든 브라우저에서 실행할 수 있습니다.
  • 개인 블로그, 상세 테이블, 등록 양식, 랜딩 페이지, 뉴스레터, 온라인 포트폴리오 작성 등 다양한 애플리케이션도 있습니다.
  • 장점은 개방형 표준이고, 배우기 쉽고, 뛰어난 커뮤니티 지원으로 초보자에게 친숙하고, 검색 엔진 친화적이라는 것입니다.
  • 단점으로는 취약한 보안, 디자인 유연성 부족, 다양한 브라우저에서 일관되지 않은 출력, 제한된 기능 등이 있습니다.

HTML의 하위 집합

1. XHTML(확장 가능한 하이퍼텍스트 마크업 언어)

  • XHTML은 XML 기반 마크업 언어로, 엄격한 구문과 의미 규칙을 준수합니다.
  • XHTML은 HTML 4의 후속 버전으로, 언어를 더욱 모듈화하고 확장 가능하게 만드는 것을 목표로 합니다.
  • XHTML 문서는 형식이 올바르고 유효해야 하므로 작성하기가 더 어렵고 일관성이 뛰어나며 다양한 장치에서 액세스할 수 있어야 합니다.

2. SGML(표준 일반화 마크업 언어)

  • SGML은 HTML을 비롯한 마크업 언어를 정의하는 데 사용되는 메타언어입니다.
  • SGML은 문서의 구조와 내용을 설명하는 표준 구문을 제공하므로 서로 다른 시스템 간에 정보를 교환하는 데 유용합니다.
  • SGML은 복잡하고 강력한 시스템이지만 구문과 복잡성으로 인해 HTML과 같은 단순한 마크업 언어보다 널리 사용되지 않습니다.

3. DHTML(동적 HTML)

  • DHTML은 HTML, CSS 및 JavaScript를 사용하여 동적이고 대화형 웹 페이지를 만드는 것을 의미합니다.
  • DHTML을 사용하면 페이지를 새로 고칠 필요 없이 사용자 작업에 따라 웹페이지의 콘텐츠, 레이아웃 및 동작을 조작할 수 있습니다.
  • DHTML은 드롭다운 메뉴, 도구 설명, 슬라이드 쇼와 같은 동적 효과를 만드는 데 널리 사용됩니다.
  • 간단한 애니메이션이나 게임도 만들 수 있습니다.

4. TTML2(Timed Text Markup Language 2)

  • TTML2는 캡션, 자막 등 시간이 지정된 텍스트 콘텐츠를 표준화된 방식으로 표현하는 데 사용되는 마크업 언어입니다.
  • TTML2는 다양한 언어 및 글꼴 스타일 지원을 포함하여 시간이 지정된 텍스트의 형식을 지정하고 스타일링하기 위한 포괄적인 기능 세트를 제공합니다.
  • TTML2는 청각 장애가 있는 사용자를 위한 멀티미디어 콘텐츠의 접근성을 보장하고 모든 사용자의 비디오 콘텐츠 가용성을 향상시키는 중요한 도구입니다.

HTML 템플릿

모든 HTML 페이지에는 기본 템플릿이 있습니다. 다음 섹션으로 구성됩니다:

문서 유형 선언: HTML 문서의 첫 번째 줄은 사용된 HTML 버전을 정의하는 doctype 또는 문서 유형 선언입니다.

구문:

<!DOCTYPE html>

요소: 요소는 다른 모든 요소를 ​​포함하는 HTML 문서의 루트 요소입니다.

구문:

<html>...</html>

Head 요소: head 요소에는 제목, 메타데이터, 스타일시트와 같은 외부 리소스에 대한 링크 등 문서에 대한 정보가 포함됩니다.

구문:

<head>...</head>

제목 요소: 제목 요소는 브라우저 제목 표시줄에 표시되는 문서 제목을 정의합니다.

구문:

<title>Name of Web Page</title>

Body 요소: body 요소에는 텍스트, 이미지, 기타 미디어 등 문서의 주요 내용이 포함됩니다.

구문:

<body>...</body>

이러한 기본 태그 외에도 콘텐츠를 추가하여 멋진 웹사이트를 만드는 데 도움이 되는 몇 가지 다른 요소가 있습니다. 이것들은-

제목: 제목(H1, H2, H3 등)은 콘텐츠를 구조화하고 정보 계층을 제공하는 데 도움이 됩니다.

구문:

<h1>Main Heading</h1>

단락: 단락(

)은 텍스트 블록을 정의하는 데 도움이 됩니다.

구문:

<p>Hello World</p>

링크: 링크()를 사용하면 사용자가 다른 웹페이지나 다른 리소스로 이동할 수 있습니다.

구문:

<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>

Images: Images () can provide visual content in a document.

Syntax:

<img src="image.jpg" alt="Image Description">

Code:

<!DOCTYPE html>


EDUCBA’s Page


Hello World! This is EDUCBA’s first web page.

Output:

HTML이란 무엇입니까?

How to Create an HTML Table?

There are specific table tags to create a table – mainly,

, , and
,
.

Pre-requisites for HTML Table

For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.

  • : Defines a table
  • : Defines a table row
  • : Defines a table header cell
  • : Defines a table data cell

    Student Details Table

    John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.

    Name Mathematics Science
    Mary 78 92
    Susan 98 84
    Amy 63 79

    Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-

    Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.

    Step #2: Select File > New Text File.

    HTML이란 무엇입니까?

    Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.

    HTML이란 무엇입니까?

    Step #4: Again, go to File > Save As and save the file with the filename.html format.

    HTML이란 무엇입니까?

    HTML이란 무엇입니까?

    Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    

    Output:

    HTML이란 무엇입니까?

    Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”

    HTML이란 무엇입니까?

    Step #6: Now, define the table using the

    tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag, and adding the data in each cell using
    tag. Don’t forget to close the tags with a corresponding closing tag.

    Code:

    <table>
    <tr>
    <th>Name</th>
    <th>Mathematics</th>
    <th>Science</th>
    </tr>
    </table>

    Save the file and refresh the webpage to see the updated output:

    HTML이란 무엇입니까?

    Step #7: Add the student details by defining a row for each student using

    tag. Close the table with the
    tag.

    Code:

    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>

    Once again, save and refresh the webpage to see the final output:

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>
    
    Name Mathematics Science

    Applications of HTML

    Application How Does HTML Help?
    Web pages To create web pages, provide the structure and content for displaying information in a web browser.

     

    E-commerce To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.

     

    Landing pages To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.

     

    Newsletters It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.

     

    Online portfolios To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.

     

    Blogs One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
    Documentation It helps to create documentation and help files, providing information and guidance to users of the software and other products.

     

    Advertisements It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.

     

    Forms To create a form, one can use
    elements.

     

    Advantages and Disadvantages

    Pros Cons
    Open Standard: It is free of cost and readily available. Limited Functionality: It cannot perform complex tasks like calculations or data storage.
    Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers. Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
    Search Engine Friendly: Search engines can easily crawl and index the content of the pages. Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
    Community Support: It has large community support and many online resources available for learning and troubleshooting. Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.

    Final Thoughts

    In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.

    FAQs

    Q1. How to convert an HTML to PDF?

    Answer: To convert, use a library or online service that supports HTML to PDF conversion.

    Q2. How to add an image in HTML?

    Answer: To add an image, use the tag with the src attribute pointing to the image file’s URL or local path. Example:

    <img src="image.jpg" alt="Alt text">

    Q3. Is HTML a programming language? What is the HTML used for?

    Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.

    Q4. How to add a video in HTML?

    Answer: To add a video, use the

    <video src="video.mp4"></video>

    One can also add controls to play, pause, and adjust volume with the controls attribute:

    <video src="video.mp4" controls></video>

    Q5. Is HTML case-sensitive?

    Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.

    Q6. How many tags are in HTML?

    Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.

    Q7. What is HTML doctype?

    Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:

    <!DOCTYPE html>

     Q8. What is an HTML header?

    Answer: The HTML

    tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.

    위 내용은 HTML이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사:HTML 소개다음 기사:HTML 소개