임채욱

프로그래밍을 공부하는중입니다. aythffk@gmail.com

html

5 minute read

HTML

<!DOCTYPE html>: document type declaration, It must only appear once, at the top of the page

tags

  • html
  • head
  • title
  • body
  • h1
  • p: <a href=link>
  • br: line break
  • img: <img src="" alt="" width="" height="">, img tag should also contain the width, height
  • hr: element is used to separate content
  • pre: element defines preformatted text

attributes

  • href: specifies the URL
  • src: specifies the path to image to be displayed
  • width, height: which specifies the width and height of the image
  • alt: specifies an alternate text for an image
  • style: used to add styles to an element, such as color, font, size, and more.
    • ex) <p style="color:red;">""</p>
  • lang: lang attribute inside the <html>
    • ex) <html lang="en">
  • title: a tooltip when you mouse over the element
    • ex) <p title="I'm a tooltip">This is a paragraph.</p>

styles attribute

<tagname_ style="property:value;"> The property is a CSS property. The value is a CSS value.

  • background-color
    • ex) <body style="background-color:powderblue;">
  • Text Color
    • ex) <h1 style="color:blue;">This is a heading</h1>
  • Fonts
    • ex) <h1 style="font-family:verdana;">This is a heading</h1>
  • Text Size
    • ex) <h1 style="font-size:300%;">This is a heading</h1>
  • Text Alignment
    • ex) <h1 style="text-align:center;">Centered Heading</h1>

Formatting Elements

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML Quotation and Citation Elements

  • blockquote: a section that is quoted from another source.
  • q: a short quotation

HTML Comments

  • <!-- Write your comments here -->

HTML Color

  • text color
  • border color
    • ex) <h1 style="border:2px solid Tomato;">Hello World</h1>
  • color values
    • <h1 style="background-color:rgb(255, 99, 71);">...</h1>
    • <h1 style="background-color:#ff6347;">...</h1>
    • <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
    • <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
    • <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

HTML CSS

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
    • ex) <style> body {background-color: powderblue;} h1 {color: blue;} </style>
  • External - by using a <link> element to link to an external CSS file
    • <head> <link rel="stylesheet" href="styles.css"> </head>

The target Attribute

  • _self: Default. Opens the document in the same window/tab as it was clicked
  • _blank: Opens the document in a new window or tab
  • _parent: Opens the document in the parent frame
  • _top: Opens the document in the full body of the window

ex) <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

ex) <button onclick="document.location='default.asp'">HTML Tutorial</button>

ex) <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

HTML Images

The <img> tag has two required attributes:

  • src: Specifies the path to the image
  • alt: Specifies an alternate text for the image ex) <img src="img_chania.jpg" alt="Flowers in Chania">

Image Size

ex) <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

ex) <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

ex) <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>

Use the CSS float property to let the image float to the left or to the right

ex) <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p>

HTML Tables

  • <table>: defines an HTML Table
  • <tr>: each table row
  • <th>: each table header
  • <td>: each table data/cell
  • css
    • border: 1px solid black;
    • border-collapse: collapse;
    • padding: 15px;
    • text-align: left;
    • border-spacing: 5px;
  • colspan: cell span more than one column
    • ex) <th colspan="2">Telephone</th>
  • rowspan: cell span more than one row
    • ex) <th rowspan="2">Telephone:</th>
  • caption: add a caption to table

HTML Lists

  • <ul>: unordered list starts, list items will be marked with bullets (small black circles)
    • ex)<ul style="list-style-type:disc;">
    • disc, circle, square, none
  • <li>: Each list item starts
  • <ol>: ordered list starts, list items will be marked with numbers
    • type attribute
      • <ol type="1">
      • <ol type="A">
      • <ol type="a">
      • <ol type="I">
      • <ol type="i">
    • start attribute
      • <ol start="50">
  • <dl>: defines the description list
  • <dt>: defines the term (name)
  • <dd>: describes each term
  • CSS property float:left to display a list horizontal

HTML Block and Inline Elements

  • <div>: element is a block-level element.
    • ex) <div style="background-color:black;color:white;padding:20px;"></div>
  • <span>: element inside a paragraph.
    • ex) <span style="color:blue;font-weight:bold"></span>

HTML The class Attribute

  • The class attribute is often used to point to a class name in a style sheet.
  • ex) <div class="city">, <span class="note">

HTML The id Attribute

  • id attribute is used to specify a unique id for an HTML element.
  • The id attribute is used to point to a specific style declaration in a style sheet.
  • ex) <h1 id="myHeader">My Header</h1> <style>#myHeader{color...}</style>
  • ex <a href="#C4">Jump to Chapter 4</a>

HTML Iframes

  • An inline frame is used to embed another document within the current HTML document.
  • ex) <iframe src="_url_" title="_description_">

HTML JavaScript

  • <script> tag is used to define a client-side script (JavaScript).
  • To select an HTML element, JavaScript most often uses the document.getElementById() method.

HTML Entities

  • Some characters are reserved in HTML.
  • ex) &_entity_name_; OR &#_entity_number_;
  • ex) sign( < ): &it; or &#60;

XHTML

  • XHTML stands for EXtensible HyperText Markup Language
  • XML is a markup language where all documents must be marked up correctly (be “well-formed”).

HTML Forms

The <form> Element

  • The HTML <form> element is used to create an HTML form for user input
  • type: “text”, “radio”, “submit”

    The <label> Element

  • Notice the use of the <label> element in the example above.

    The Submit Button

  • <input type="submit"> defines a button for submitting the form data to a form-handler.
  • The action attribute defines the action to be performed when the form is submitted.
  • ex) <form **action="/action_page.php**">
  • The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.(“_self”, “_blank”)
  • <form action="/action_page.php" target="_blank">
  • The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.
  • ex) <form action="/action_page.php" method="get">
  • ex) <form action="/action_page.php" method="post">

    The <select> Element

  • The <select> element defines a drop-down list
  • selected attribute: pre-selected option
  • size attribute to specify the number of visible values
    • ex) <select id="cars" name="cars" size="3">
  • multiple attribute to allow the user to select more than one value
    • ex) <select id="cars" name="cars" size="4" multiple>

      The <textarea> Element

  • The <textarea> element defines a multi-line input field (a text area)
    • ex) <textarea name="message" rows="10" cols="30">
    • ex) <textarea name="message" style="width:200px; height:600px;">

      The <button> Element

  • The <button> element defines a clickable button
  • ex) <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    The <fieldset> and <legend> Elements

  • The <fieldset> element is used to group related data in a form.
  • The <legend> element defines a caption for the <fieldset> element.

    The <datalist> Element

  • Users will see a drop-down list of the pre-defined options as they input data.
  • The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

The <output> Element

  • The <output> element represents the result of a calculation (like one performed by a script).

HTML Input Types

  • input types you can use in HTML
    • button
    • checkbox
    • color
    • date
    • datetime-local
    • email
    • file
    • hidden
    • image
    • month
    • number
    • password
    • radio
    • range
    • reset
    • search
    • submit
    • tel
    • text
    • time
    • url
    • week

Tags:

Categories:

Updated:

You May Also Enjoy

docker

less than 1 minute read

도커