search

Halaman web html dengan kode sumber

1 years ago
Komentar: 0
Dibaca: 96

Jika Anda penyedia konten, baca HTML. Jika Anda seorang desainer grafis, bacalah CSS. Jika Anda seorang programmer dan ingin menambahkan efek dinamis ke halaman web Anda, bacalah JavaScript. Tetapi jika Anda beroperasi di OMO (one-man-operated) dan diharapkan membuat situs web yang terlihat cukup bagus, Anda perlu memahami HTML, CSS, dan JavaScript. Inilah alasan saya menggabungkan HTML dan CSS dalam artikel ini karena keduanya tidak dapat dipisahkan

Show

Untuk membuat situs web OMO, saya menyarankan itu

  1. Pahami HTML, CSS, dan JavaScript secara menyeluruh
  2. Pilih alat pembuat. Gunakan Dreamweaver jika Anda mampu. Jika tidak, temukan editor kode sumber gratis (seperti VS Code, Sublime Text, Sublime Text, NotePad++). Untuk pemrogram, Eclipse/NetBeans/VSCode adalah pilihan yang baik untuk HTML/CSS/JavaScript karena mereka melakukan pemeriksaan sintaks dan menyediakan pelengkapan kode otomatis
  3. Rancang dan atur halaman Anda. Tentukan tampilan dan nuansa situs web Anda. Berapa banyak kolom? . g. , header, menu navigasi, konten utama, sidebar, daftar isi, footer)?
  4. Perhatikan baik-baik situs web favorit Anda. CSS sangat besar dan kompleks. Anda tidak dapat menemukan roda ini. Gunakan F12 Debugger untuk memeriksa HTML/CSS situs web favorit Anda
    Gunakan kerangka kerja CSS, seperti BootStrap, untuk memulai desain Anda
  5. Mulailah dengan desain CSS awal. Desain situs web dimulai dengan CSS, BUKAN HTML?. Kerjakan CSS Anda
    1. Partisi halaman web Anda menjadi bagian logis melalui

      (atau HTML5',,

      ,), seperti header, konten, footer. Tetapkan 
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      _1 ke

      yang unik (mis. g. , "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      2", "
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      3". Tetapkan nama kelas umum ke bagian (tidak unik) yang memiliki gaya yang sama (mis. g. , "
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      4", "
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      5"). Tulis pemilih-id CSS dan pemilih-kelas (mis. g. , 
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      6 
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      7 
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      8) untuk tag umum (seperti 
      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.
      9, 

      

      

      Halaman web html dengan kode sumber
      0, 

      

      

      Halaman web html dengan kode sumber
      1, 

      

      

      Halaman web html dengan kode sumber
      2, 

      

      

      Halaman web html dengan kode sumber
      3, 

      

      

      Halaman web html dengan kode sumber
      4, 

      

      

      Halaman web html dengan kode sumber
      9, ______5, _______

      'S. Pada dasarnya, apa yang saya katakan adalah merancang masing-masing bagian dengan sendirinya - sebuah strategi "bagi dan taklukkan".

    2. Buat sub-kelas untuk gaya umum, seperti tata letak tabel dan gambar serta efek khusus (mis. g. , "

      

      

      Halaman web html dengan kode sumber
      _7", "

      

      

      Halaman web html dengan kode sumber
      8", "

      

      

      Halaman web html dengan kode sumber
      9"). Mereka dapat digunakan di

      dan 



      

      

      Halaman web html dengan kode sumber
      _0

    3. Ada banyak template CSS (atau template web) yang bagus dan gratis tersedia secara online (cukup google "CSS Templates" atau "Web templates"). Pilih salah satu yang sesuai dengan selera Anda untuk dijadikan model. Anda juga dapat melihat CSS situs web mana pun yang menurut Anda menarik. Waspadai Hak Kekayaan Intelektual, jangan gunakan gambar atau grafik apa pun kecuali yang berada di domain publik. Sangat mudah untuk membuatnya sendiri dengan alat pencitraan, seperti PhotoShop, Element, Illustrator, atau bahkan Paint
      Gunakan kerangka kerja CSS, seperti BootStrap;
  6. Tulis halaman HTML Anda. Anda mungkin perlu memodifikasi CSS sambil jalan. Hal yang paling menantang bagi seorang penulis web OMO adalah dia harus memperhatikan konten dan tampilan pada saat yang sama, dan kadang-kadang bisa kehilangan fokus.
  7. Ulangi langkah sebelumnya sampai Anda puas dengan tampilan dan nuansa halaman Anda, tata letak, dan yang paling penting, konten - cobalah untuk tidak membuat situs web lain yang tidak penting

Saya menulis di atas bertahun-tahun yang lalu saat membuat halaman web ini (Anda dapat melihat CSS saya). Hari ini, saya akan merekomendasikan agar Anda mempelajari dasar-dasar HTML/CSS, tetapi dengan cepat beralih ke kerangka kerja seperti BootStrap untuk menghasilkan halaman web yang tampak profesional. Anda tidak dapat menulis lebih baik dari orang-orang ini

Pengantar HTML

Apa itu HTML (HyperText Markup Language)?
  1. HTML adalah bahasa untuk menerbitkan halaman web di WWW (World-Wide Web, atau World-Wide Wait?)
  2. HTML adalah Bahasa Deskripsi Dokumen (alias Bahasa Markup Dokumen). HTML adalah bahasa markup standar untuk dokumen yang dirancang untuk ditampilkan di browser web. HTML BUKAN bahasa pemrograman seperti C/C++/C#/Java, yang digunakan untuk mengimplementasikan algoritma pemrograman
  3. Dokumen HTML adalah dokumen teks, dan dapat dibaca oleh manusia
  4. Hari ini, HTML bekerja sama dengan CSS (Cascading Style Sheets) (untuk tata letak) dan JavaScript (untuk pemrograman)
Versi HTML
  • Draf HTML (Oktober 1991). Tim Bernes-Lee (dari CERN) mengusulkan HTML awal (dengan 18 tag) untuk berbagi dokumen dalam sistem hypertext
  • HTML 2. 0 (24 November 1995). Diterbitkan sebagai IETF RFC 1866
  • HTML 3. 2 (14 Januari 1997). Diterbitkan sebagai W3C HTML 3. 2 Rekomendasi
  • HTML4. 0 (Desember 1997). Diterbitkan sebagai W3C HTML 4. 0 Rekomendasi, dengan ketat, transisi dan frameset. Pada tanggal 24 Desember 1999, HTML 4. 01 diterbitkan sebagai spesifikasi HTML terakhir oleh W3C. Pada Mei 2000, HTML 4. 01 Ketat sebagaimana diterbitkan sebagai Standar Internasional ISO/IEC 15445. 2000
  • XHTML 1. 0 (Januari 2000). W3C menganggap HTML 4. 01 sebagai HTML terakhir, dan melanjutkan untuk mengembangkan XHTML 1. 0 dengan aturan dan sintaks yang lebih ketat, diikuti oleh XHTML 2. 0. XHTML 2. 0, meskipun secara teoritis elegan, tidak praktis karena tidak kompatibel dengan HTML4/XHTML1. 0. Grup pemberontak yang disebut WHATWG (Web Hypertext Application Technology Working Group) terus berupaya memperluas HTML dengan lebih banyak fitur dengan cara yang kompatibel ke belakang. Pada tahun 2004, WHATWG merilis HTML5. Pada tahun 2007, HTML5 telah menarik perhatian para pengembang. W3C memutuskan untuk meninggalkan XHTML 2. 0 dan merangkul HTML5
  • HTML 5 (28 Oktober 2014). HTML 5 diterbitkan sebagai Rekomendasi W3C, diikuti oleh HTML 5. 1 pada 1 November 2016, dan HTML 5. 2 pada 14 Desember 2017
  • Pada 28 Mei 2019, W3C mengumumkan bahwa WHATWG akan menjadi satu-satunya penerbit standar HTML dan DOM

Saat ini, spesifikasi yang berlaku adalah HTML5 (@ https. //html. spek. apa. org/multi halaman/). Meskipun demikian, hal yang paling menarik tentang standar adalah tidak ada yang benar-benar mengikutinya dengan ketat. Setiap browser (Chrome, Firefox, Opera, Safari, dan Internet Explorer) memiliki variasinya sendiri dan mendukung standar hingga berbagai tingkatan (untuk mengalahkan yang lain)

Tag Markup

HTML menggunakan tag markup, seperti

(untuk Paragraf),

ke (untuk Heading Level 1 hingga 6), 






Halaman web html dengan kode sumber
1 (untuk Gambar), 






Halaman web html dengan kode sumber
0(untuk Anchor atau Hyperlink), untuk menandai dokumen. Tag markup HTML melakukan fungsi-fungsi ini
  1. Layout dokumen, e. g. ,

    (tata letak sebagai paragraf),

    ke (tata letak sebagai judul tingkat 1 hingga 6), 


    

    

    Halaman web html dengan kode sumber
    3 (melakukan jeda baris), 


    

    

    Halaman web html dengan kode sumber
    4 (menggambar aturan horizontal), (tabulating data),
      (layout an ordered list).
    1. Provide link (called hyperlink) to another HTML document, via the ________19_______0(Anchor tag). These hyperlinks, a distinct feature in HTML, greatly help the users in navigating the web and enrich the users' experience. Hyperlinks make the HTML popular.
    2. Embed images, audios, videos, programs (in JavaScript, VBScript, Applet, Flash, or MS ActiveX control), and objects within an HTML document. HTML is multimedia! The hypertext document may contain texts, images, audios, videos, and even programs.
    Separating Content and Presentation

    The purpose of a markup language is to relieve the content provider from worrying about the actual appearance of the document. The author merely indicates (via markup tags) the semantic meaning of the words and sentences (such as paragraph, heading, emphasis, and strong), and leave it to the browser to interpret the markups and render the document for display on the screen. In other words, it allows the separation of content and presentation. The content provider focuses on the document contents, while the graphic designer concentrates on the view and presentation.

    Nowadays, HTML should be used solely to markup the contents, while its companion technology known as CSS (Cascading Style Sheet) be used for defining the presentation of the document, so as to separate the content and presentation.

    These are the common pitfalls in older HTML documents and you should avoid:

    • Do not specify "appearance" properties, such as foreground and background color, text alignment, font face, font size, border, margin and padding, in the HTML document. Use an external CSS instead to set the appearance and presentation. Presentation-related tags (such as ________19_______0,) and attributes (such as ________19_______7, ________19_______8, ________19_______9, ________29_______0, ________29_______1) have been deprecated in HTML 4, in favor of CSS.
    • Do not use nested tables or frame for formatting the document, use

      and ________19_______0, or HTML5 new tags such as,, and

      .

    HTML Authoring Tools

    HTML documents can be created by a wide range of tools, from simple plain-text editors (not recommended), source-code editor (e.g., VS Code, Sublime Text, Notepad++), programming IDE (e.g., Eclipse, NetBeans) to sophisticated WYSIWYG (What You See Is What You Get) editors (e.g., Dreamweaver).

    HTML By Examples

    Let's go thru some HTML examples and the syntaxes. Do not attempt to start designing your website until you understand the CSS.

    Example 1: Basic Layout of an HTML Document

    Let's begin with a simple example to illustrate the basic layout of an HTML document.

    ________32_______

    Use a source-code editor, which provides syntax highlighting, auto-code-complete, snippets, etc (such as VS Code, Sublime Text, Atom, NotePad++) to enter the above HTML codes and save as "________29_______3".

    Notes: If you use macOS's default TextEdit (NOT Recommended), select "Format" to "Make Plain Text" and choose "Unicode (UTF-8)" for character encoding before saving your file. Also, Windows NotePad is NOT Recommended, as it does not provide syntax highlighting, auto-code-complete, snippets, etc.

    Open the file in a browser (such as Firefox, Internet Explorer/Edge, Chrome, Safari, Opera) by double-clicking the file; or drag and drop the file into the browser; or through the browser's "File" menu ⇒ "Open File..." ⇒ "Browse..." and select the file.

    How it Works?
    1. An HTML document begins with a Document-Type Declaration (Line 1) to identify itself as an HTML document to the browser.
    2. The HTML content is contained within a pair of ________29_______4 container tags. You can specify the default language of your document via attribute ________29_______5 (for English) inside the opening tag.
      3. Halaman web html dengan kode sumber
    3. There are two sections in the document: ________29_______6 and ________29_______7, marked by ________29_______4 and ________29_______4 tags, respectively.
    4. In the ________29_______6 section:
      1. The ________19_______0 element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the ________42_______02 character encoding scheme, which is compatible with ASCII code for English alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and Korean) efficiently.
        When saving your file, you need to choose "UTF-8 encoding" in the "save-as" dialog menu.
      2. The ________29_______4 element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window.
    5. In the ________29_______7 section:
      1. The ________42_______05 container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from ________42_______05 (largest) to ________29_______4. Line 11 uses a ________42_______08 (Heading Level-3).
      2. The ________19_______4 standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line).
      3. The ________42_______10 container tags (Line 10 and 12) mark the enclosing texts as a paragraph. ________42_______10 is the most frequently-used tag in HTML.
      4. The ________42_______12 tags (nested under the ________42_______10 in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested ________42_______14 tags (Line 12) specify "emphasis" rendered in italic; and ________29_______4 (HTML 5) requests for highlight.

    View Page Source

    You can read the HTML source code by right-clicking on the page and select "View Source" (or "View Page Source", or "Show Page Source"). Try it out.

    Note: For macOS's Safari, you may need to enable "Show Page Source" via "Preferences" ⇒ Advanced ⇒ "Show Develop menu in menu bar".

    Don't Load the Cached Page (Ctrl-F5)!

    Most browsers cache web pages (and the associated images, style sheets, JavaScripts) to boost the speed for web surfing. When you modify and reload a page (via the refresh key F5), the browser might retrieve the un-modified cache copy. To force the browser to reload the page (and all its associated resources) from the source, hit Ctrl-F5.

    Most Frequently-Used HTML Elements

    The most frequently-used HTML elements are:

    • block elements:

      (paragraph), ________19_______3 (line break),

      to (heading level 1 to 6), ________19_______4 (horizontal rule),
      • (unordered list),
        1. (ordered list).
        2. inline elements: ________19_______0(bold), ________19_______0(italic), ________19_______1 (image), ________19_______0(anchor for hyperlink).
        3. table

    ________29_______4, and then mark the cells of the row via (for header cell) or (for details cell).
  2. The
    3. element can be nested under....

    I shall illustrate the use of these elements through the following examples.

    Example 2: Lists and Hyperlinks

    ________42_______
    How it Works?
    1. The (in Line 3) is an HTML comment. Comments are ignored by the browsers, but are important to provide explanations to the readers as well as the author.
    2. There are two types of lists in HTML: ordered list and unordered list. An ordered list is marked by ________42_______23 and displayed with numbers; while a unordered list is marked by ________42_______24 and displayed with bullets. Each of the list items is marked by
    3. ________29_______4
      4. .
    4. You can nest a list inside another list, by placing the complete inner list definition inside a list item
    5. ________29_______4
      6. of the outer list.
    6. Hyperlink is marked by ________19_______0standalone tag. The attribute ________42_______28 provides the destination URL of the link.

    Example 3: Tables and Images

    ________70_______
    How it Works?
    1. A table, consisting of rows of cells, can be marked via ________29_______4.
    2. A HTML table is row-centric. You shall first mark a row via
    ......to provide a caption for the table.
  3. Image is marked via the ________19_______1 tag. The mandatory attribute ________42_______31 specifies the path (or url) for the image source file; ________42_______32 gives the alternative text if the image cannot be displayed. I used relative path in the ________42_______31, where "________42_______34" denotes the parent directory. You need to find some images, store them and figure out your own relative path.
  4. The ________19_______1's optional attributes ________42_______36 and ________42_______37 specify the width and height of the image displayed area. They are used here to resize the images for consistent display.
  5. In the ________29_______6 section, I added some so-called style rules under the ________19_______0 tags, so as to nicely display the table. You could ignore the styles now, which will be covered later in the CSS section.

    6. HTML Template

    HTML Document Template
    ________82_______

    External CSS and JavaScript are often used in an HTML document. Line 6 includes an external CSS file; and line 7 includes an external JavaScript file.

    HTML Document Validator

    You can submit your HTML document to the W3C Online Validator (@ https://validator.w3.org/) for validation.

    Debugging HTML

    F12 Debugger (Web Developer Tools)

    Recall that you can right-click ⇒ View Source (or View Page Source) to inspect the raw HTML markups.

    In most of the browsers, you can push F12 to get into Web Developer Tools, which support debugging HTML, CSS, JavaScript, DOM and more.

    To debug HTML:

    1. Choose the "Inspector" panel to view your HTML codes.
    2. To inspect an element, click on the "picker" and point to the HTML element of interest. You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.

    Try it out on the earlier examples.

    HTML Basics

    HTML Tags, Attributes and Elements

    Halaman web html dengan kode sumber
    HTML Tags

    An HTML opening tag is enclosed by a pair of angle brackets in the form of ________42_______40(e.g.,

    , ________42_______41). The tag-name shall be in lowercase.

    Tag's Attributes

    Attributes, in the form of ________42_______42 pairs can be included in the opening tag to provide additional information about the element.

    Example 1: In, the attribute ________29_______5 specifies the natural language for this document.

    Example 2: In ________19_______0, the attribute ________42_______45 specifies the character encoding scheme.

    Example 3: An ________19_______1 (image) tag may contain these attributes:

    ________90_______

    The attribute "________42_______31" specifies the source-URL of the image; "________42_______32" specifies an alternate text, if the image cannot be displayed; "________42_______36" and "________42_______37" specify the width and height of the image displayed area.

    Some of the attributes are mandatory (e.g., the "________42_______31" and "________42_______32" attributes of the ________19_______1 tag); while some are optional (e.g., the "________42_______36" and "________42_______37" attributes of the ________19_______1 tag, which are used by browser to reserve space for the image and resizing the image; but browser can figure out the width and height after the image is loaded).

    Multiple attributes are separated by space, as follows:

    ________101_______

    Attributes are written in the form of ________42_______57________42_______58 pairs. The ________42_______59 should be enclosed in single or double quotes for XHTML/XML compliance (although HTML5 does not enforce it).

    HTML Elements

    An HTML element consists of the opening and closing tags, and the content in between, e.g.,

    ________42_______60

    , ________42_______61.

    There are two types of elements:

    1. Container Element: A container element has an opening tag ________42_______40 that activates an effect to its content, and a matching closing tag ________42_______63 to discontinue the effect. In other words, container elements apply formatting to their contents. For example:________0_______
    2. Void Element (or Standalone Element or Empty Element): A void element does not enclose content but is used to achieve a certain effect, e.g., ________19_______4 is used to draw a horizontal rule; ________19_______3 to introduce a manual line-break; and ________19_______1 for embedding an external image.
      In XHTML, you need to end a standalone element with a trailing ________42_______67 in the opening tag. For examples:________9_______Alternatively, you can also close a standalone element with a matching closing tag. This is cumbersome but consistent in syntax to the container element. For example,________19_______HTML5 no longer enforces the above rules. Today, most developers omit the trailing ________42_______67 for brevity, e.g., ________19_______3, ________19_______4.
      HTML4 has these void elements: ________19_______0, ________19_______0, ________19_______3,
    , ________19_______4, ________19_______1, ________19_______0, ________19_______0, ________19_______0, ________19_______0.
    HTML5 added ________19_______0, ________19_______0, ________19_______0.
    Nesting Elements and the Document Tree

    An HTML element can be nested within another element, e.g.,

    ________42_______83

    . It is important to properly nest the elements, e.g., the sequence ________42_______84 is invalid.

    A valid HTML document exhibits a tree structure (called DOM or Document Object Model), with the element as the root element of the document tree, with two child elements: and .

    [TODO] Draw the DOM tree for one of the examples.

    Rendering HTML Pages

    Browsers follow these rules when rendering HTML documents:

    1. In HTML5, the tag-names are NOT case sensitive. I recommend using lowercase, as it is easier to type and XHTML compliance. (XHTML/XML is case sensitive.)
    2. Blanks, tabs, new-lines and carriage-returns are collectively known as white spaces. "Extra" white spaces are ignored. That is, only the first white space is recognized and displayed. For example,________29_______

      produces the following single-line output on screen with words separated by a single space:

      See how the extra white spaces, tabs and line-breaks are ignored by the browser.


      You need to use the paragraph tag ________42_______10 to lay out a paragraph; or insert a manual line-break tag ________19_______3 to break into a new line. In other words, you control the new-lines via the mark-up tags. The ________42_______10 leaves additional space after the paragraph; while ________19_______3 does not.
      To get multiple whitespace, use a special code sequence ________42_______89 (which stands for non-breaking space). For example,________42_______0

      This is a paragraph.

      Another paragraph
      with a line-break in between and more spaces     before this.

    The Basic Document Skeleton

    The Element and its Child Elements and

    An HTML document has the following skeleton:

    ________42_______1

    The ________29_______4 container element defines the extent of an HTML document.

    There are two sections: ________29_______6 and ________29_______7:

    1. .. container element defines the ________29_______6 section, which contains descriptions and meta-information of the HTML document. Browsers interpret these descriptions to properly display the body content.
    2. .. container element defines the ________29_______7 section, which encloses the content that users actually see in the browser's window.
    The ________29_______6 Section and the ________42_______96 container element encloses the title for the page. You should use a meaningful title because:
    • The title shows up at the title-bar of the browser window.
    • The title shows up in bookmarks and history lists (the URL is stored if there is no title).
    • Titles are used by search engines to index your page.

    The ________42_______97________42_______98

    The is the same as:

    ________42_______2

    The "________42_______99" is needed to prevent the page from scrolling to the top following ________70_______00.

    The inline JavaScript is hard to maintain, and hence, not recommended.

    Images

    ________19_______1 Image Tag (Void Element)

    Function: Embed an image inside an HTML document. The syntax is:

    ________42_______3

    Example:

    ________42_______4

    Attributes:

    • src="imageUrl" (required): gives the URL of the image.
    • alt="text" (required): alternative text to be displayed if the image cannot be displayed.
    • width="n|n%", height="n|n%": specify the width and height of the image display area (in pixels or percentage). Browsers use these values to reserve space for the image (before the image is downloaded) and continue rendering the rest of the contents. You can also use the width and height to scale an image. This is not recommended because scaling-up results in a blur image and scaling-down is a waste of bandwidth.
      I recommend that you use the ________42_______36 and ________42_______37 tags for images, so that the browser can reserve spaces for the images. This is more efficient and could avoid a jerky display if you page contains many images. You can find out the width and height of an image easily by checking the "Properties" of the image.
    • title="tooltip-text": the attribute ________70_______04 is applicable to most of the HTML elements for you to provide the tool-tip text.

    Many attributes were added in HTML5. Some of them will be discussed in the later sections.

    • crossorigin="anonymous|use-credentials":
    • referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url":
    • decoding="sync|async|auto":
    • fetchpriority="high|low|auto":
    • loading="eager|lazy":
    • sizes=list:
    • srcset=list:

    The following attributes were deprecated in HTML5: ________70_______05, ________70_______06, ________70_______07, ________70_______08, ________42_______57.

    Using Image as Hyperlink

    To use an image as a hyperlink, put the image tag ________19_______1 between ________19_______0and . For example:

    ________42_______5

    Image used as hyperlink anchor automatically gets a border. The color of the border is given in the ________19_______9 (unvisited), ________29_______0 (visited), ________29_______1 (active) attributes of the tag (or the ________9_______3, ________9_______4, ________9_______5, and ________9_______6 CSS properties - to be discussed later).

    Introduction to CSS

    Why Style Sheet?

    The original aim of HTML is to let the content providers concentrate on the contents of the document and leave the appearance to be handled by the browsers. Authors markup the document contents using markup tags (such as

    ,

    ,
      ,
    , ________19_______1) to indicate its semantic meaning ("This is a paragraph", "This is heading Level 1", "This is an unordered list", "This is a table", "This is an image"). The browsers then decide on how to display or present the contents in the browser's window for the web surfers.

    However, HTML has gone out-of-control in the early years. Many markup tags and attributes were created for marking the appearance and the display styles (e.g., ________19_______0,

    , ________19_______7, ________70_______22, ________19_______8, ________19_______9, ________29_______1, ________29_______0 are concerned about the appearance in font, color and alignment) rather than the meaning of the contents. These tags flood the document and make creation and maintenance of the contents extremely difficult. Furthermore, over the years, we have engaged graphic designers to work on the appearance and leave the content providers to focus on the contents. Hence, there is a need to separate the contents and presentation of the HTML document.

    The W3C (World-Wide Web Consortium @ www.w3c.org) responded to the need of separating document's contents and presentation by introducing a Style Sheet Language called CSS (Cascading Style Sheet) for presentation, and removing the presentation tags and attributes from HTML. CSS can be viewed as a companion of HTML. It allows web graphic designers to spice up the web pages, so that the content providers can focus on the document contents with HTML.

    CSS Specifications

    W3C defines three CSS levels:

    1. CSS Level 1 (December 1996): CSS1 laid the ground work and introduced the selectors and most of the properties.
    2. CSS Level 2 (May 1998) and CSS Level 2.1 (Last revised on June 2011): CSS2 added new features such as targeting devices and printers, and absolute positioning. CSS2.1 (@ http://www.w3.org/TR/CSS2/) touches up CSS2.
    3. CSS Level 3: CSS3 is not a single piece of specification. As CSS grows, W3C decided to break it into modules, such as the Selectors module, the Values and Units Modules, the Box Alignment module, and so on. Each module is then developed independently. The CSS3 Selectors module (@ http://www.w3.org/TR/selectors/) and CSS3 Colors module (@ http://www.w3.org/TR/css3-color/) were completed in 2011. Other modules are still work-in-progress.

    It is important to take note that:

    • CSS is humongous!!! Most of the browsers today have yet to fully support CSS2/CSS2.1.
    • CSS is a language with its own syntax, which is different from HTML and JavaScript.
    What is a Style Sheet?

    A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A style rule is used to control the appearance of HTML elements such as their font properties (e.g., type face, size and weight), color properties (e.g., background and foreground colors), alignment, margin, border, padding, and positioning. This is the same as the styles in any publishing software like WinWord or LaTex.

    The word cascading means that multiple style rules can be applied to the same HTML element. The browser follows a certain cascading order in finalizing a style to format the HTML element in a predictable fashion.

    CSS By Examples

    CSS Example 1: CSS Syntax and Tag-Selectors

    Create the following file (using a source-code editor such as VS Code, Sublime Text, Atom, NotePad++), and save as "________70_______27".

    ________42_______6

    A CSS style sheet provides style rules to HTML documents. You test out the above styles, by creating an HTML document, which references the CSS via the ________19_______0 element, as follows:

    ________42_______7
    How it Works?
    1. ________70_______29 is a CSS comment. Comments are ignored by the browsers but provide important information to the readers, as well as the author.
    2. A CSS style sheet contains style rules.
    3. A style rule begins with a selector, followed by the list or presentation properties enclosed within ________70_______30.
    4. A property is identified by its ________42_______57, followed by its ________70_______32, separated by colon "________70_______33". The ________70_______34 pairs are separated by semicolon "________70_______35". A ________42_______57 could have multiple ________70_______32s, separated by commas "________70_______38" (e.g., the ________70_______39 property).
    5. A selector selects a set of HTML elements to apply the styles. This example uses the so-called ________70_______40, which select all elements having the tagname. For example, the first rule is applicable to the ; the 3rd to

      , and the 4th rule to all the elements.

    6. Selectors having the same rules can be grouped together and separated by commas "________70_______38". For example, the 2nd rule is applicable to to.
    7. Some of the properties are inherited by the nested elements. For example, the

      nested under inherits the ________70_______39 from the . Some properties are not inherited.

    8. If more than one rules are applicable, the properties are accumulated. But, the last rule will take effect if there is conflict. For example, both Rule 3 and 4 are applicable to

      . The

      accumulates the properties from both rules. It takes the ________70_______43 from Rule 3 (which is not specified in Rule 4); but uses the ________70_______44 from the Rule 4 (instead of Rule 3).

  6. Style properties:
    • The ________70_______39 list the font faces, in the order of preferences. Browsers search through the list (from the beginning) to an available font face.
    • ________70_______22 and ________70_______47: specify the foreground and background colors, respectively. Color can be expressed in ________70_______48 (hex value), ________70_______49 (decimal value between 0 and 255), or with the pre-defined color names (such as ________70_______50, ________70_______51).
    • ________70_______52: text alignment of either ________70_______53, ________70_______54, ________70_______55, ________70_______56.
    • ________70_______57: ________70_______58, ________70_______59, and others.
    • ________70_______60: ________70_______58, ________70_______62, and others.

Take note that CSS is a language with its own syntaxes. CSS syntax is totally different from HTML!

CSS Example 2: CSS Class-Selector, ID-Selector with

and ________19_______0

________42_______8

We shall use the following HTML document to test the CSS:

________42_______9
How it Works?
  1. In the earlier example, we use Tag-Selectors which select elements based on tagname. Besides the Tag-Selector, there are Class-Selector which selects elements based on ________70_______64 attribute; and ID-selector which selects an element based on the ________0_______1 attribute.
  2. An ID-Selector begins with a ________70_______66 sign, followed by an ________0_______1-name, e.g., ________70_______68 and ________70_______69, which select element with ________70_______70 and ________70_______71, respectively. Since ________0_______1-value is meant to be unique within an HTML document, ID-selector select at most one element.
  3. A Class-Selector begins with a dot "________70_______73" followed by a ________70_______64-name, e.g., ________70_______75 and ________9_______7, which select all elements with ________70_______77 and ________70_______78, respectively. Unlike ________0_______1-value that is unique, many elements can have the same ________70_______64-name.
  4. In the test HTML document, we partition the body into three sections, via

    . We assign a unique ________0_______1 to each

    , i.e.,

    ,

    and

    to semantically identify their contents, and use the ID-Selectors ________70_______68 and ________70_______69 to apply styles to the

    's.

  5. Similarly, we mark texts with ________19_______0 and ________19_______0, and use the Class-Selectors ________70_______75 and ________9_______7 to apply styles to these texts.
  6. Take note that:

    • is a block element, while ________19_______0 is a inline element.

    • The ________70_______64 attribute can take multiple values, as in ________70_______90 (Line 18). Both styles are applied.
HTML ________0_______1 vs ________70_______64 Attributes
  • ________0_______1 and ________70_______64 are used to reference HTML elements by JavaScript and CSS. ID can also be used as the target of HTML anchors.
  • ________0_______1 must be unique in an HTML document, but ________70_______64 needs not.
  • An element can have one ________0_______1, but many ________70_______64es.
  • CSS's ID-selector begins with ________70_______66 (e.g., ________70_______68), Class-selector begins with dot (________70_______73) (e.g., ________82_______02).

For example,

Recommendation: Use ID for JavaScript and internal ________19_______0link (which refers to one single element in the HTML document); and class for CSS (which refers to a group of elements with the same style).

Validating CSS

You can use Online CSS Validation Services such as W3C Jigsaw (@ http://jigsaw.w3.org/css-validator) to validate your CSS file.

Try validating the above example using W3C CSS Validator.

Inspecting Element's Styles via F12 Web Developer Tools

The Web Developer Tools supports HTML, CSS, JavaScript and DOM. You could select (inspect) an HTML element, and it will show you all the CSS rules that are applied to that elements from all the sources (inline, embedded, external), and how the rules were merged (calculated) and conflicts were resolved. You can temporarily disable a rule, and edit a rule to check the effect instantly.

To debug CSS:

  1. F12 to launch Web Developer Tools.
  2. To inspect the style of an HTML element ⇒ Choose the "HTML" panel ⇒ Click on the "Inspect" button and then select the HTML element of interest from the browser window ⇒ You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.
  3. To check/modify the CSS Style rules ⇒ Choose the "CSS" panel.

CSS Basics

CSS Syntax

CSS is a language by itself. It has its own syntax, which is totally different from HTML and JavaScript!!! (How many syntaxes you have to know to program the web?!).

The syntactic rules are:

  1. A style rule consists of a selector which selects the HTML elements it operates upon, and a list of style property ________70_______34 pairs enclosed in braces ________70_______30, as follows:________70_______0For example, This selector selects the tag. Hence, the defined style is applied to the ________29_______4 element. Many (but not all) of the CSS properties (such as color, font) are inherited by its descendants, unless they are overridden by other style rules.
  2. The ________70_______34 pairs are separated by semicolon "________70_______35". You can omit the last semi-colon before the closing brace "________82_______09". But I recommend that you keep it, so that it is easier to include new entries without a missing "________70_______35".
  3. The ________42_______57 and ________70_______32 are separated by a colon "________70_______33" in the form of ________70_______34.
  4. Multiple ________70_______32s for the same property ________42_______57 are separated by commas "________70_______38" (as in the ________70_______39). However, multiple parts of the same property ________70_______32 are separated by space "________42_______89" (as in the ________82_______21, which has a value with 4 parts).
  5. Values containing space must be quoted, e.g., "________82_______22" or ________82_______23.
  6. Extra whitespaces (blank, tab and newline) are ignored.
  7. If the same set of styles is applicable to more than one elements, the selectors can be grouped together in one single rule (called Group-Selector). The tagnames are separated by commas "________70_______38". For example, the following rule apply to elements to:________70_______1
  8. Comments can be inserted inside the style sheet enclosed between ________82_______25 and ________82_______26. The end-of-line comment ________82_______27 is not applicable in CSS?!
CSS Syntax vs. HTML Syntax

CSS and HTML have different syntaxes!!! For example, HTML's attributes uses "________82_______28" to separate the ________42_______57 and ________70_______32, in the form of ________42_______42; the name-value pairs are separated by spaces, as follows:

________42_______4

Inline, Internal and External Styles

There are three places where you can define style rules:

  1. Inline Style: Included inside a particular HTML opening tag's via attribute ________82_______32. The rules are applicable to that particular HTML element only.
  2. Internal (Embedded) Style Sheet: Embedded inside the ________19_______0 tags in the ________29_______6 section of the HTML document. The styles are applicable to that entire document.
  3. External Style Sheet (Recommended): Stored in an external file, which is then linked to HTML documents via a ________19_______0 element in the ________29_______6 section. The same external style sheet can be applied to all HTML pages in your website to ensure uniformity in appearance.
Inline Styles

To apply inline style to an HTML element, include the list of style properties in the ________82_______37 attribute of the opening tag. For example,

________70_______3

This paragraph uses 16px monospace font.

This paragraph uses default font.

This paragraph uses 12px inside this span but default font size here.

Take note that the ________42_______57 and ________70_______32 are separated by colon ________82_______40, and the ________70_______34 pair are separated by semicolon ________82_______42, as specified in the CSS syntax.

The scope of an inline style is limited to that particular element. Inline style defeats the stated goal of style sheets, which is to separate the document’s content and presentation. Hence, inline style should be avoided and only be used sparsely for touching up a document, e.g., setting the column width of a particular table.

Internal (Embedded) Styles

Embedded styles are defined within the ________19_______0 tags in the ________29_______6 section. For example,

________70_______4
  • The scope of the embedded styles is the current HTML document.
  • Embedded styles separate the presentation and content (in the ________29_______6 and ________29_______7 sections) and can be used if page-to-page uniformity is not required. That is, this set of styles is used for only one single page!?

NOTE: HTML4/XHTML1 require an additional attribute ________82_______47 in ________19_______0

________82_______49

The border property is inherited.

Although the first ________19_______0is nested under the

tag, the ________70_______06 property is not inherited from the ancestor. That is, you will not see a border around the ________19_______0's content. We can force the inheritance by assigning a special value "________82_______53" as shown in the Class Selector ________82_______54.

Resolving Conflicting Rules

Style Conflict

Style conflict on an element arises:

  1. A property is inherited from multiple ancestors.
  2. More than one rules are applicable to the element. For example, Tag-selector ________9_______2, Class-selector ________82_______56 and ID-selector ________82_______57 are all applicable to element

    .

Nearest Ancestor Wins

If a property is not defined for an element and is inheritable, it will be inherited from the nearest ancestor.

Specificity

Specificity means that "the more specific the selector, the stronger the rule". For example,

The ________9_______2 Tag-selector is the most general, which selects all the

elements; the ________82_______59 Class-selector selects a class of

elements with attribute ________82_______60; the ________82_______61 and ________82_______62 ID-selectors select only one element each with a unique ________0_______1 value. The ID-selector is the most specific (and takes precedence); followed by Class-selector; and followed by the general Tag-selector.

Locality

If the "Law of Specificity" cannot resolve the conflict, apply the "Law of Locality". The style-rule that read in last by the browser takes effect. In the above example, there are two ID-selector for ________82_______64, the latter takes effect.

The inline style (applied to a specific tag via ________82_______37 attribute) overrides the internal style (defined in ________19_______0

    ________82_______67
  • ::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the ________70_______22 and ________70_______47 properties in the selector. For example,
    • Attribute Selectors
    • T[att]: selects elements that possess the given attribute, regardless of value.
    • T[att="value"]: selects elements that possess the given attribute, with the given value.
    • T[att^="value"]: selects elements that possess the given attribute, beginning with the given value. (Symbol ________82_______70 represent beginning in regex.)
    • T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol ________82_______71 represent ending in regex.)
    • T[att*="value"]: selects elements that possess the given attribute, containing with the given value.
    Child Pseudo-Class Selectors (CSS3)

    CSS3 introduces these pseudo-class child selectors:

    • :first-child, :last-child: E.g., In ________82_______72, td is the first child of the parent.
    • :nth-child(odd), :nth-child(even): E.g., ________82_______73
    • :nth-child(3), :nth-child(n+3) (3, 4, 5,...), :nth-child(3n) (3, 6, 9,...), :nth-child(3n+1) (4, 7, 10,...), etc.
    • :nth-last-child(3): last 3rd child
    Type Pseudo-class Selector (CSS3)
    • T:first-of-type, T:last-of-type: For example ________82_______74 select the first

      .

    • T:nth-of-type(odd), T:nth-of-type(even): E.g., ________82_______75
    • T:nth-of-type(3), T:nth-of-type(n+3) (3, 4, 5,...), T:nth-of-type(3n) (3, 6, 9,...), T:nth-of-type(3n+1) (4, 7, 10,...), etc.
    ________82_______76 Pseudo-class Selector

    Select elements whose value is in the permitted range, for giving positive feedback, e.g.,

    ________82_______77 Pseudo-class Selector

    The ________82_______78 selector lets you select elements not meeting the criterion in selector ________82_______79. For example, ________82_______80 select elements not belonging to class ________82_______81. See above example.

    There are many more pseudo-class selector!

    CSS Style Properties

    For a complete list of the style properties, you may refer to the CSS specification (@ W3C), or online reference. I shall present the commonly-used properties such as color, font, text, margin, border, padding.

    CSS ________70_______22 and ________70_______47 Properties

    Specifying Color

    Color can be expressed as:

    1. RGB hexadecimal triplets in the form of ________82_______84, where ________82_______85, ________82_______86, ________82_______87 are values of red, green and blue. The values are between ________82_______88 and ________82_______89, in hexadecimal. For example, ________82_______90. The color value ________82_______91 can be shorthand as ________82_______92.
    2. RGB in the form of ________82_______93. The ________82_______94, ________82_______95, ________82_______96 can be expressed in a decimal value between ________82_______97 and ________82_______98; or in percentage between ________82_______99 and ________90_______00. I prefer the decimal form over the hex triplets as it is easier to visualize the values.
    3. RGBA in the form of ________90_______01: RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with ________90_______02 for opaque; and ________90_______03 for totally transparent.
    4. HSL in the form ________90_______04: Hue is the color on the color wheel in degrees between ________82_______97 to ________90_______06. Saturation (purity of color) is expressed in percentage between ________82_______99 and ________90_______00 (pure color). Lightness (brightness or intensity) is also expressed in percentage between ________82_______99 (darkest) and ________90_______00 (brightest).
    5. HSLA in the form of ________90_______11.
    6. The 16 pre-defined English color names as follows. These 16 colors are numerically generated and are really really ugly. You should avoid using them!! Many browsers also support other color names such as ________90_______12, ________90_______13, etc.
    CSS Color Properties

    The most important color properties are ________70_______22 and ________70_______47:

    • color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name: Set the color of the text (or foreground). Color values are inherited by descendants.
    • background-color: #rrggbb|rgb(rrr,ggg,bbb)|rgba(r,g,b,a)|color-name|transparent|inherit|initial: Set the background color of an element. The default is ________90_______16 and NOT inherited, so as to create a see-through effect. The ________90_______17 sets to its default value.

    CSS Length Measurements

    Many CSS properties, such as ________42_______36, ________42_______37, ________82_______21, ________70_______06, ________90_______22, ________90_______23 and ________90_______24, require a length measurement. For example,

    There are two types of length measurements: relative (to another length property) and absolute (e.g., inches, centimeters, millimeters).

    The absolute units are:

    • in (inch)
    • cm (centimeter)
    • mm (millimeter)
    • pt (point): 1 inch has 72 points. 1pt is 1/72 in ≈ 0.014in ≈ 0.35mm.
    • pc (pica): 1 pica is 12 points. 1 inch has 6 picas. 1pc ≈ 1/6 in ≈ 0.17in ≈ 4.2mm. ________90_______25 is not commonly used.
    • px: ________90_______26 is a measurement unit created for the CSS, where the thinest line shall have width of 1px. Today, it is defined as 1px=1/96 inch. Since 1pt is 1/72 inch; 12pt = 16px = 1/6 inch = 0.42cm.

    The relative units are:

    • % (percent): in term of the percentage of a property of a referenced element, generally, the same property of the parent element.
      For example, ________90_______27 set the table's ________42_______36 to 80% of the ________42_______36 of the parent (probably a

      or ).

    • em: the width of the letter ________90_______30 of a referenced font, generally, the current font.
      For example, ________90_______31 means that the margins are twice the current (referenced) font-size.
      However, if ________90_______32 is used to set the ________90_______23 property, it needs to find a reference. In this case, it is referenced to the parent's ________90_______23. For example, ________90_______35 sets the ________90_______23 of

      to 1.2 times of the parent (possibly a

      or ).

    • rem (CSS3): relative to the ________90_______23 of the root or element.
    • vw, vh (CSS3): one percent of viewport width and height respectively.
    • vmin, vmax (CSS3): one percent of the viewport smaller dimension or larger dimension respectively, i.e., 1vmin is equal to the smaller of 1vh or 1vw; 1vmin is the larger of 1vh or 1vw.
    • ex (not commonly-used): the height of letter 'x' of the parent's font. ________90_______38 is not commonly used.

    There shall be no space between the number and the unit, as space is used to separate multiple values.

    Take note that ________90_______39 and ________90_______32 measurement are relative to another element (percentage values are always relative, e.g., ________90_______41 of something). For example,

    To add to the confusion, some properties, such as ________90_______24, can also accept a bare number, without a unit. This bare number is treated as a factor to be multiplied by a reference. For example,

    NOTE: In HTML tag attributes, such as ________90_______43, the bare number is measured in pixels.

    Recommendation
    • Define a ________90_______23 for .
    • Use ________90_______45 for ________90_______23 of other elements - relative to .
    • Use ________90_______32 for other properties such as ________82_______21 and ________90_______22, which is relative to the current ________90_______23.
    • Use other relative measurement such as ________90_______39 if appropriate. Avoid absolute measurements.

    For example,

    Halaman web html dengan kode sumber

    CSS Box Model and Properties ________82_______21, ________70_______06, ________90_______22 and Content Area

    Recall that HTML defines two kinds of elements: block element and inline element.

    A block element (such as

    ,

    , to) is always rectangular in shape and exhibits the so-called box model, with four virtual rectangles wrap around its "content area", representing the content area, padding, border, margin, as illustrated below.

    Halaman web html dengan kode sumber
    1. The content area contains the texts, image, or child elements.
    2. The padding is the space between the content area and the border. It clears an area outside the content area. It has the same background as the content area.
    3. The border goes between padding and margin. You can set a color and a style (such as solid, dash, dotted) to the border.
    4. The margin is the space outside the border (to another element). It clears an area outside the border. The margin does not have a background, and is totally transparent.

    As illustrated in the box model diagram, margin pushes its border (and content) away with a transparent background showing the parent (having the effect of pushing itself away from the parent); while padding pushes its content inwards with the same background. Margin and padding serve the same purpose if there is no border and background applied.

    Take note that the ________42_______36 and ________42_______37 that you set for the element specify its content area, exclude the margin, border and padding. To get the actual size of the element, you need to add the margin, border and padding to the width/height. For example, suppose that:

    ________70_______5

    The actual width of the element is ________90_______57.

    Each of the rectangular bounds has four sides, and can be individually referred to as ________90_______58, ________90_______59, ________90_______60, and ________90_______61 in a clockwise manner, where ________90_______62 could be ________82_______21, ________70_______06 or ________90_______22. The four sides can be controlled individually or as a group.

    Inspecting the Box Model via Web Developer Tools

    [TODO]

    CSS ________42_______36 and ________42_______37 Dimension Properties

    These properties allow you to set up the dimension, such as the width and height of an element.

    • width|height: auto|n|n%: The ________42_______36 and ________42_______37 are specified in units such as ________90_______26 (pixels), or percent (relative to the parent element).
    • max-width|max-height|min-width|min-height: none|n|n%: Set the minimum and maximum width and height.

    As mentioned earlier, CSS length measurement requires a proper unit, e.g., ________90_______71 or ________90_______72. Take note that ________90_______73 is meaningless in CSS (this is a very common error!) However, in HTML, ________90_______43 means 400 pixels.

    The ________42_______36 and ________42_______37 properties are NOT inherited by its descendants. The default value is "________90_______77", which lets the browser to compute a suitable value. We shall discuss "________90_______78" value later.

    CSS ________82_______21, ________70_______06 and ________90_______22 Properties

    The margin, border and padding related properties are:

    • margin-top|margin-right|margin-bottom|margin-Left: auto|n|n%: Set the four margins individually. The "________90_______82" shall be expressed in a proper unit (e.g. ________90_______83 and ________90_______84). You could use a negative value to overlap two elements (e.g., ________90_______85). The value of "________90_______77" lets the browser to compute an appropriate number. "________90_______87" is relative to the same property (i.e. margin-xxx) of the parent.
    • (Shorthand) margin: top right bottom left
      (Shorthand) margin: top right-left bottom
      (Shorthand) margin: top-bottom right-left
      (Shorthand) margin: all
      These are one-line shorthand notations to set all the four margins. If four values are given, they are applied to top, right, bottom, left (in the clockwise manner). If two values are given, they are applied to top-and-bottom, left-and-right. If one value is given, it is applied to all the four borders.
      Take note that there is no commas between the items, as all items are considered to be one property value.
    • padding-top|padding-right|padding-bottom|padding-left: n|n%: Set the four paddings individually, similar to ________90_______88.
    • (Shorthand) padding: top right bottom left
      (Shorthand) padding: top left-right bottom
      (Shorthand) padding: top-bottom left-right
      (Shorthand) padding: all
      A one-line shorthand notation to set all the four paddings, similar to ________82_______21.
    • border-width: thin|medium|thick|n
      Set the width of the four borders. "________90_______82" can be used to set an absolute thickness. ________90_______91 is a shorthand notation, you can use ________90_______92, ________90_______93, ________90_______94, and ________90_______93 to set the four borders individually.
    • border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
      Set the style of the 4 borders. Similarly, you can use ________90_______96, ________90_______97, ________90_______98, and ________90_______97 to set the four borders individually.
    • border-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name
      Set the color of the 4 borders. Similarly, you can use ________101_______00, ________101_______01, ________101_______02, ________101_______01 to set the four borders individually..
    • (Shorthand) border: width style color
      Shorthand notation to set all the properties of the borders, in the order shown. You can also use shorthands ________101_______04, ________101_______05, ________101_______06, and ________101_______07 to set the four borders individually.

    Margin, border, padding, width are NOT inherited by its descendants.

    Example: [TODO]

    More Margin Properties
    • margin: 0 auto: set top and bottom margins to 0. Setting left and right margins to ________90_______77 equally distribute the extra horizontal space, and hence, center the element horizontally.
    • Collapsed Margins: When margin of two elements touching each other vertically, they collapsed (with the larger margin). But when two margins touches horizontally, they do not collapse.
    • Negative Margin: margin is one of a few CSS properties that can be set to negative. This is used to overlap elements (without using absolute positioning). Padding and border cannot be negative.
    More Border Properties
    • border-radius: can be used to create a rounded border. You can also use it to convert a box to a circle (with ________101_______09).
    • border-image: can be used to create a multi-color border.

    Example [TODO]

    CSS ________101_______10 Properties

    In addition to border, outline is a line that goes around the element, outside of the border, which does not take any space in the box model, and does not affect the position of the element.

    • outline-color:
    • outline-style: dotted|dashed|solid|double|groove|ridge|inset|outset: similar to ________70_______06.
    • outline-width:
    ________90_______78

    For most of the block elements (e.g.,

    ,

    ), the default of ________90_______78 sets the width to the width of the parent minus its own margin, border and padding. Images ________19_______1 have an ________90_______77 width equals to its actual width. Float elements have ________90_______77 width of 0.

    Example: [TODO]

    Filling the Width of the Containing Element

    Browser would automatically adjust the ________101_______17 to fill the container's width if the sum of its width, left and right margin/border/padding does not add up to the full width of the containing element. Take note that browser will not adjust the ________42_______36, ________101_______19, ________101_______05 and the left margin/border/padding.

    Example: [TODO]

    Center a Block Element

    To center a block element, you set the ________101_______21 and ________101_______17 to ________90_______77 (browser divides the remaining width to left and right margins equally).

    For example, all the selected

    are centered:

    Example

    The above box-model diagram was produced using these codes.

    ________70_______6

    CSS ________101_______24 Properties

    The frequently-used font properties are:

    • font-family: font-name|generic-family-name
      A prioritized list of fonts to be used. The browser will try to use the first font if the it is available, and goes down the list.
      The generic font family names include: ________101_______25 (with small tails), ________101_______26 (without small tails), ________101_______27, ________101_______28, ________101_______29. Use ________101_______27 for program listing. Use ________101_______26 for computer display. ________101_______25 are mainly used in prints (such as "Times" for newspapers and books).
    • font-size: ________101_______33|xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger
    • font-weight: normal|bold|bolder|lighter|100|200|...|800|900
      You can use a number between 100 to 900, in multiple of 100. The value of 400 is the normal weight; while 700 is bold.
    • font-style: normal|italic|oblique
      The ________70_______62 uses italic font installed (some font families include the italic version); while the ________101_______35 is done by tilting the normal font.
    • font-variant: normal|small-caps
      The ________101_______36 is smaller than the uppercase.
    • (Shorthand) font: style variant weight size/line-height family
      Set all the font properties using a one-line shorthand notation. The properties must follow the order shown above. However, the leading and trailing items can be omitted. For example,________70_______7is the same as:________70_______8

    Font properties are inherited by its descendants.

    Example: [TODO]

    Google Fonts

    "Google Fonts" @ https://fonts.google.com/ is a huge set of high-quality, free and open-source fonts. It is certainly the choice of the fonts today.

    To use particular fonts, e.g., "Roboto" and "Roboto Mono", you can either:

    1. Add a ________19_______0 to CSS (in your HTML's ________29_______6 section, e.g.,________70_______9
    2. Use a ________101_______39 in your CSS (you need not update all your HTML pages):________82_______0

    CSS ________101_______40 Properties

    The frequently used text properties are:

    • text-align: left|right|center|justify
    • line-height: normal|n|n%|factor
      Set the height of the line. The ________101_______41 gives the factor to be multiplied by the current font-size. E.g., factor of 1.5 means 1.5 times of the current font.
    • text-decoration: none|underline|overline|line-through|blink
      Graphic designer dislikes "________101_______42" and considers it as a legacy of typewriter. "________101_______43" is even worse!
    • text-transform: none|uppercase|lowercase|capitalize
      The ________101_______44 transforms the first letter to uppercase.
    • text-indent: n|n%
      Indent the first-line of the paragraph. To indent all the lines of a paragraph (i.e., the whole block), use padding or margin.
    • letter-spacing: normal|n
      word-spacing: normal|n
      Additional spacing to be applied to letters or words.
    • white-space: normal|pre|nowrap
      Specify how white spaces inside the element is to be handled. For "________101_______45" (pre-formatted), preserve the white-spaces.

    CSS ________101_______46 Properties

    The background related properties are:

    • background-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name|transparent
      Set the background color of an element. The default is ________90_______16.
    • background-image: url(imageURL)|none
      Use an image as the background.
    • background-repeat: repeat|repeat-x|repeat-y|no-repeat
      Define how the background image shall be repeated in x and y direction or both.
    • background-attachment: scroll|fixed
      Define whether background image shall scroll with the page or fixed.
    • background-position: x y|x% y%|top left|top center|top right|center left|center center|center right|bottom left|bottom center|bottom right
      Set the initial position of the background image. Note that there are two values, specifying the x and y position respectively.
    • (Shorthand) background: color image repeat attachment position: one-line shorthand notation.

    In all the above, the term background refers to the background of the elements selected (not necessary the entire window). In other words, you can set an image as the background of an element.

    CSS ________101_______48 Properties

    The properties are:

    • list-style-type: none|disc|circle|square
      list-style-type: decimal|decimal-leading-zero
      list-style-type: lower-alpha|upper-alpha|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin
      Set the style of the list item
    • marker (bullet) for
        ,
          respectively.
        1. list-style-position: inside|outside: Define whether the list item marker shall be inside or outside the item element.
        2. list-style-image: none|url(imageURL): Use an image as the list item marker.
        3. (Shorthand) list-style: type position image: Shorthand notation to specify all the properties of the list.

      Example: [TODO]

      CSS Table Properties

      • border-collapse: collapse|separate
        Collapse or separate the adjacent cells shared border into one.
      • border-spacing: n
        For separate border, specify the distance between border (i.e., the deprecated ________101_______49 attribute)
      • caption-side: top|bottom|left|right
        Specify which side to show the caption.
      • empty-cells: show|hide
      • table-layout: auto|fixed
      [TODO: More]

      More HTML

      Image Maps

      Image maps are "clickable" image that loads different pages depending on where (or which hot-regions) you click on the image. Each hot region of the image map can be associated with a different link. There are two type of image maps:

      1. Client-side image map: browser at the client-side handles the mapping of hot-regions to links.
      2. Server-side image map: server handles the mapping of hot-regions to links. The co-ordinates of the location clicked are sent to the server to be processed by a program (such as a CGI/ASP/JSP/PHP script). The mapping information is held on the server.
      Client-Side Image Map

      To create a client-side image map:

      1. Define a image map using ________29_______4 and define the hot-regions in the map using the ________19_______0 tags. Decide what link maps to which hot-region. Hot regions can take circle, rectangle, or polygon in shape.
      2. In the ________19_______1 tag, add the attribute ________101_______53 to indicate this image is used as a client-side image map.________82_______1

      Example:

      ________82_______2
      Client-side Image Map Tags - ________19_______0 and ________19_______0

      Function: To set up a client-side image map with hot regions.

      Syntax (map: Container tag, area: Standalone tag)

      ________82_______3

      ________19_______0's attributes:

      • ________101_______57: declares a unique name for the map, to be targeted in attribute ________101_______58 of the ________19_______1.
        (The attribute ________42_______57 is used the older browsers. XHTML specifies using ________0_______1 instead, which automatically create a named anchor.)

      ________19_______0's attributes:

      • ________101_______63: define the shape of the hot region. The "default" value for any point not part of another hot region.
      • ________101_______64: list of coordinates that made up the hot region.
        • For ________101_______65, ________101_______66 to specify the upper-left and lower-right corners.
        • For ________101_______67, ________101_______68, where ________101_______69 is the center and ________82_______94 is the radius.
        • For ________101_______71, ________101_______72, where ________101_______73 are coordinates that made up the polygon. You should close the polygon by putting ________101_______74 as the last coordinates.
      • ________42_______28: gives the target URL of the hyperlink.
      • ________101_______76: deactivate the hot region, pointing to nowhere.
      • If two hot regions overlap, the first takes effect.

      A client-side image map can be used as a navigation bar on top of the page, instead of using individual images. This may save some transmission overhead, as each individual image triggers its own HTTP request.

      Server-Side Image Map

      On the ________19_______1 tag, include the "________101_______78" (is server map?) attribute, and wrap the ________19_______1 within an anchor ________101_______80. For example,

      ________82_______4

      When the image is clicked, the ________101_______81 position of the click is send to the server as query parameters. For example,

      ________82_______5It is up to the server to decide on how to process the ________101_______81 position received via a server-side program (such as CGI/ASP/JSP/PHP/Servlet).
      Client-Side vs. Server-Side Image Map

      Client-side image map is much more popular (and recommended) than server-side image map because:

      1. Mapping for client-side image map is processed by the browser locally with immediate response, without connecting to the server and waiting for server to response.
      2. No special server-side programs needed, relies solely on the browser to process the mapping of the hot regions.

      Frames

      You can divide the browser's window into multiple regions called frames. Each of the frames can contain a distinct and complete HTML document. Framed layout enables you to display several HTML document at once. Framed layout is popular for:

      • Dividing the window into a navigation frame (on the top or left-side of the window) and an actual content frame.
      • Dividing the window into a small summary frame and a detail frame. Java API documentation is a good example.

      However, use frames with extreme care! Frame (especially the "header" frame) occupied precious screen asset, as it does not scroll away! Framed layout have fallen out of favor over the years. Use

      and CSS to organize your web page instead.

      The tags involved are:

      • ________29_______4: to sub-divide the window.
      • : defines each of the frames in a frameset.
      • ________29_______4: for floating or inline or internal frame.
      • ________29_______4: alternative text if frame is not supported by browser.
      Frame Set ________29_______4

      Function: To divide the window into multiple frames, row-wise or column-wise. ________29_______4 can be nested for complex layout. ________29_______4 is to be used in place of ________29_______4 tag. i.e., there should not have an tag in the document with .

      Syntax:

      ________82_______6

      Attributes:

      • ________101_______90: a list of frame sizes in pixels or percentage separated by commas. Wildcard "________101_______91" can be used to indicate the remaining space.

      Example:

      ________82_______7Divide the window into four rows of sizes: 100 pixels, 20% of the screen, 150 pixels, and the remaining space.
      Individual Frame

      Function: Declare each individual frame, and place the HTML document.

      Syntax:

      ________82_______8

      Attributes:

      • ________101_______92: provides the URL of the document to be displayed inside this frame.
      • ________42_______57: specifies an unique identifier, to be used as the target of other tags, such as ________19_______0, ________19_______0.
      • ________101_______96: suppresses resizing by dragging of border.
      • ________101_______97: sets to 1 to show the border, 0 to suppress.
      • ________101_______98: "________101_______99" to show scrollbars and allow scrolling; "________0_______00" to suppress scrolling; and "________90_______77" to let the browser to decide (e.g., auto-hide).

      Example: Divide the screen into 3 frames, top, left and right.

      ________82_______9
      Targeting Named Frame

      To control which frame to receive the content of a hyperlink, you could include the ________0_______02 attribute in the ________19_______0tag. Using the previous example, a hyperlink in the "________0_______04" frame targeting the "________0_______05" frame is:

      ________90_______0

      If all the links in the "________0_______04" frame are targeting the "________0_______05" frame, you can use the ________19_______0 tag (in the HEAD section) to set up a global target reference:

      As mentioned, frames has gone out of favor these day. The HTML5 introduced new elements such as

      ,,
      ,,
      to help you in organizing your web page, instead of using frame, division, or table.
      No Frame ________29_______4

      Function: Provides an alternative text if the browser does not support framed layout. ________19_______0 must be placed within a .

      Syntax (Container tag):

      ________90_______1
      Iframe (Inline Frame or Internal Frame) ________29_______4

      Function: Place an inline frame on the browser window. An iframe is a frame that can be embedded within a regular HTML page, which contains a separate and complete HTML document, set via its ________42_______31 attribute.

      Syntax (Container tag):

      ________90_______2

      You could use CSS to position and style the iframe. Iframe is used extensively by JavaScript and Ajax.

      Example: [TODO]

      Embedding Programs

      Client-side programs such as Java Applets, MS ActiveX controls, JavaScript, VBScript, Flash, can be embedded inside an HTML document. These programs will be downloaded from the server and executed inside the browser. The browser supports the execution of client-side programs via a built-in processor or plug-in (e.g., the Java JRE Plug-in, Flash player plug-in).

      The markup tags involved here are:

      • ________29_______4: for embedded Java Applets (deprecated in HTML 4 in favor of tag).
      • ________29_______4: for embedded an executable programs.
      • ________19_______0: providing runtime parameters to and .
        Java Applet ________29_______4

        Function: Embedding a Java Applet. Deprecated in HTML 4 in favor of .

        Syntax (Container tag):

        ________90_______3
        Program Object ________29_______4 and Parameter ________19_______0

        Function: Embed an executable program and provide the program parameters. ________19_______0 must be nested inside an or .

        Syntax (Container tag), ________19_______0 (Standalone tag):________90_______4

        HTML Global Attributes

        The global attributes are applicable to ALL the HTML elements.

        • class="classname": specifies the subclass this tag belongs to. The ________70_______64 attribute can have more than one values. The class value needs not be unique. Classes are primarily used by CSS for applying style rule, selected via the class-selector (in the form of ________0_______22 or ________0_______23). See the "CSS Section" above.
        • id="idValue": for declaring an unique, document-wide identifier to a particular tag. No two tags can have the same ________0_______1 value, while many tags can belong to the same ________70_______64. The ________0_______1 attribute is used by CSS for applying styles (via the id-selector in the form of ________0_______27), and JavaScript for manipulating the element (via ________0_______28 function).
        • style="rule": for applying inline style to a tag, applicable to this tag only. See the "CSS Section".
        • title="tooltip-text": gives an advisory text description for this tag, and display as tool tip when you point your mouse pointer over the element.
        • lang="value": specifies the language used by this particular tag.
        • dir="LTR|RTL": specifies the direction of the text for this tag. It takes values of ________0_______29 (left-to-right) or ________0_______30 (right-to-left).

        HEAD Section's Tags

        The following tags can be used in the HEAD section:

        • ...: provides a title to this document.
        • : provides meta information of this document.
        • : establishes the linked resources and their relationship, in particular, the external CSS style sheet.
        • : declares a base URL for all the links in this document, and the ________42_______57 of the target frame.
        • : embedded style rules applicable to this document.
        • : program scripting codes.
        Base-URL and Default Target Name ________19_______0

        Function: Declare the base URL for all the links in this document via attribute "________0_______33", and specify the target name via attribute "________0_______02".

        Syntax:

        ________90_______5

        Attributes:

        • href="baseUrl": All relative URLs in this document are relative to this base-URL. For example, if ________19_______0’s ________0_______33 is set to:________90_______6then, the relative URL of "________0_______37" is resolved to "________0_______38".
        • target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "________0_______39" in new window, "________0_______40" in this frame, "________0_______41" in the parent frame, "________0_______42" in the full body of the window.
        Link Resources and Relationship ________19_______0

        Function: Link to another resource and indicate its relationship. There could be more than one ________19_______0 tags in the HEAD section.

        Syntax:

        ________90_______6

        Attributes:

        • rel, rev: indicates the forward or reverse relationship to the current document. Take value of ________0_______45, ________0_______46, ________0_______47, ________0_______48, ________0_______49, ________0_______50, ________0_______51, ________0_______52, ________0_______53, ________0_______54, and ________0_______55 (i.e., author).

        [TODO] other attributes.

        Example:

        ________90_______8

        The above ________19_______0 tags indicate that "________0_______57" is the stylesheet of MIME type "________0_______58"; "________0_______59" is the home page; "________0_______60" is the help page; this page ("________0_______61") is the previous page of "________0_______62" (in a reverse relationship), and this page is the next page of "________0_______63".

        The most-commonly used ________19_______0 is to specify the external CSS style sheet. The rests are hardly used.

        Including an Icon

        A favicon (aka favorite icon, shortcut icon, URL icon) is a file containing a small 16x16 icon. Browser can display the icon besides the URL bar or bookmark. The favicon file is usually called "________0_______65".

        To include an icon, provide a ________19_______0 tag in the section, as follows:

        You can use PhotoShop/Element to create a favicon file; or use a simple imaging tool (such as MS Paint) to create a small image and then submit to an online converter to generate a favicon file.

        Meta Information ________19_______0

        You can use ________19_______0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:

        ________70_______9

        Examples:

        ________90_______6

        The ________19_______0 tag can also be used to ask the server to insert an HTTP response header (read "HTTP Basics"). The syntax is as follow:

        ________70_______9

        EXAMPLE 1: Auto-Redirect after x seconds

        ________101_______2

        The above ________19_______0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:

        ________101_______3

        The browser, in response to this response header, redirect to the given URL after 3 sec.

        EXAMPLE 2: Auto-Refresh every x seconds

        ________70_______9

        EXAMPLE 3: Specify the character set used in the HTML document.

        The server will include this response header in the response message, when the page is downloaded:

        ________101_______5
        Embedded Style Definition ________19_______0

        Function: For embedded style declarations, covered earlier.

        Scripting Codes ________19_______0

        Function: For embedding scripting codes. See my "Introduction to JavaScript" on usage and examples.

        More CSS

        CSS Variables (Custom Properties)

        CSS Variables (aka Custom Properties or Cascading Variables) allows you to define variables and using that variables in multiple properties, in a style sheet. This is really useful in setting themes (without using a preprocessor such as LESS or SASS).

        Rules:

        1. The name of the variables shall begin with two dashes (________0_______73), e.g., ________0_______74.
        2. To reference the variable, use ________0_______75.
        3. To define global-scope CSS variables, place them in the ________0_______76 pseudo-class.

        For examples,

        ________101_______6

        Modifying CSS Properties from JavaScript and jQuery

        To modify the styles of an HTML element from JavaScript, set its ________82_______37 property, e.g.,

        ________101_______7

        To modify the style of an HTML element from jQuery:

        CSS ________0_______78 Property - Positioning the HTML Block Elements

        position: static|absolute|relative|fixed|inherit|initial|unset

        You can use the property ________0_______78 to alter the position of block elements.

        Each element has a natural location inside a page's flow, in the order read in by the browser. By default (________0_______80), elements are displayed from top to bottom in the normal flow. For block elements, line breaks are inserted at the beginning and the end to form a rectangular box.

        You can remove the box from the normal flow and specify its location with respect to either its parent element (________0_______81_) atau jendela browser (

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        82);

        Untuk elemen non-

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        84, posisi baru ditentukan melalui properti 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        85, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        53, 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        87, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        54, 
        



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  
        There are two types of lists in HTML:
        
  
          
    
        1. Ordered List.
          2. 
    
        2. Unordered List.
          3. 
  
        
 
  
        This is a nested unordered list of links:
        36, 
        



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  
        There are two types of lists in HTML:
        
  
          
    
        1. Ordered List.
          2. 
    
        2. Unordered List.
          3. 
  
        
 
  
        This is a nested unordered list of links:
        37

        • atas. kiri. dasar. Kanan. N. N%. mobil. Atur jarak dari tepi elemen ini ke tepi yang sesuai dari blok penampung
        • lebar. tinggi. N. N%. mobil. Atur lebar dan tinggi elemen blok ini
        • z-index. nomor. mobil. Ketika dua blok tumpang tindih karena pemosisian ulang, blok dengan nomor 
          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.
          91 yang lebih besar berada di atas (i. e. , z-axis menunjuk ke luar layar seperti pada sistem koordinat grafik 3D standar). Angka negatif diperbolehkan. 
          Halaman web html dengan kode sumber
          _77 default menumpuk elemen pada level yang sama dengan induknya. Jika 
          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.
          _91 dari dua elemen adalah sama atau tidak ada 
          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.
          91 yang ditentukan, elemen terakhir yang dirender diletakkan di atas. z-index dengan alpha dapat membuat efek tembus pandang
        • meluap. luapan-x. luapan-y. mobil. tersembunyi. menggulir. bisa dilihat. mewarisi. Tentukan cara menangani konten yang melebihi lebar/tinggi blok
        • luapan-bungkus. normal. istirahat-kata. mewarisi. tentukan apakah browser dapat memutus baris dengan kata-kata panjang, jika meluap dari wadah
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        _80 (standar)

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        _80 default memposisikan elemen sesuai dengan aliran normal halaman, dalam urutan yang dibaca oleh browser. Properti 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        _85, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        54, 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        87, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        53 tidak berpengaruh untuk 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        84

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        _83

        Pindahkan elemen relatif ke posisi aliran normalnya. Ruang asli yang ditempati oleh elemen ini dipertahankan. Elemen sekitarnya tidak terpengaruh. Misalnya,


        

        

        Halaman web html dengan kode sumber
        _03

        Posisikan elemen relatif terhadap elemen ancestor non-statis pertama; . Elemen dengan posisi absolut dikeluarkan dari aliran normal, seolah-olah tidak ada

        Untuk benar-benar memposisikan suatu elemen dalam elemen yang memuatnya (selain ), nyatakan elemen yang memuatnya relatif tanpa gerakan apa pun, e. g. , 


        

        

        Halaman web html dengan kode sumber
        _04

        Pemosisian absolut itu menarik. Anda dapat membuat animasi (seperti bola memantul dan salju yang jatuh) dengan benar-benar memposisikan (dan berulang kali memposisikan ulang) gambar di layar browser. Lihat "Contoh JavaScript" saya

        Misalnya,

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        _82

        Elemen ditetapkan pada posisi relatif terhadap jendela browser, dan tidak dapat digulir. Posisi didefinisikan dalam properti 

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        85, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        53, 
        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        87, 
        




Table and Images



  Table and Images
  
    Logo of Languages
    
      S/No
      Language
      Logo
    
    
      1.
      HTML5
      
        Halaman web html dengan kode sumber
        
    
    
      2.
      CSS3
      
        Halaman web html dengan kode sumber
        
    
    
      3.
      JavaScript
      
        Halaman web html dengan kode sumber
        54 (atau 
        



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  
        There are two types of lists in HTML:
        
  
          
    
        1. Ordered List.
          2. 
    
        2. Unordered List.
          3. 
  
        
 
  
        This is a nested unordered list of links:
        36 dan 
        



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  
        There are two types of lists in HTML:
        
  
          
    
        1. Ordered List.
          2. 
    
        2. Unordered List.
          3. 
  
        
 
  
        This is a nested unordered list of links:
        37). Elemen dengan posisi tetap dikeluarkan dari aliran normal, seolah-olah tidak ada

        Misalnya, tetap

        ditambahkan ke contoh di atas dalam pemosisian absolut. Perhatikan bahwa indeks-z digunakan untuk memastikan bahwa perbaikan

        selalu di atas yang lain

        's, terlepas dari urutan penulisan

        's

        CSS 

        

        

        Halaman web html dengan kode sumber
        _12 dan 

        

        

        Halaman web html dengan kode sumber
        13 Properti - Mengambang Elemen Kiri atau Kanan

        mengambang. kiri. Kanan. tidak ada

        Anda dapat mendorong elemen ke tepi kiri atau kanan elemen penampung melalui properti 


        

        

        Halaman web html dengan kode sumber
        12. Float sering digunakan untuk gambar, dengan teks yang mengelilingi elemen float. Elemen yang mendahului elemen melayang tidak terpengaruh. Elemen setelah elemen mengambang mengalir di sekitarnya

        Anda dapat mengapung secara horizontal (mis. e. , kiri dan kanan), bukan atas dan bawah. Selain gambar, elemen float harus memiliki lebar dan tinggi yang ditentukan secara eksplisit. Elemen float sebenarnya diambil dari aliran normal. Elemen berikut bertindak seolah-olah elemen mengambang tidak ada, tetapi teks yang dilampirkan akan membungkus elemen mengambang

        Jika banyak gambar diapungkan bersama (katakan ke kiri), gambar kedua akan didorong ke tepi kiri gambar pertama, dan seterusnya jika ada ruang horizontal yang tersedia; . Misalnya, kita dapat melayangkan banyak gambar kecil ke kiri sebagai berikut

        Untuk mematikan pelampung, gunakan properti 


        

        

        Halaman web html dengan kode sumber
        _13, dan tentukan sisi mana (kiri, kanan atau keduanya) yang tidak mengizinkan elemen pelampung

        jernih. kiri. Kanan. keduanya. tidak ada


        

        

        Halaman web html dengan kode sumber
        _16 berarti sisi kiri elemen ini tidak boleh menjadi elemen mengambang. Artinya, kiri harus dimulai dengan margin kiri elemen yang memuatnya. 

        

        

        Halaman web html dengan kode sumber
        _16 mirip dengan 


        

        

        Halaman web html dengan kode sumber
        3

        Menggunakan 

        

        

        Halaman web html dengan kode sumber
        _12 untuk membuat kolom

        Elemen blok, secara default, dimulai dari tepi kiri dan menempati lebar penuh dari elemen yang memuatnya. Oleh karena itu, itu tidak akan berbaris satu sama lain dalam format kolom. Anda dapat menggunakan properti 


        

        

        Halaman web html dengan kode sumber
        _12 untuk membuat kolom atau kisi

        [TODO] lagi

        Contoh. Memposisikan Iframe

        "


        

        

        Halaman web html dengan kode sumber
        _21"

        <tag-name attName1="attValue1" attName2="attValue2" ...> .. tag-name>
        _8

        "


        

        

        Halaman web html dengan kode sumber
        _22"

        <tag-name attName1="attValue1" attName2="attValue2" ...> .. tag-name>
        _9

        Properti CSS 


        

        

        Halaman web html dengan kode sumber
        _23 (juga berlaku untuk 


        

        

        Halaman web html dengan kode sumber
        1) mengapungkan iframe ke margin kiri atau kanan jendela browser

        Anda juga dapat menggunakan properti CSS 


        

        

        Halaman web html dengan kode sumber
        _25 untuk memposisikan iframe (dan elemen HTML lainnya), "

        

        

        Halaman web html dengan kode sumber
        26" memposisikan elemen relatif terhadap elemen leluhur yang diposisikan pertama; 

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.
        0

        CSS 

        

        

        Halaman web html dengan kode sumber
        _30 dan 

        

        

        Halaman web html dengan kode sumber
        31 Properti

        menampilkan. memblokir. Di barisan. inline-blok. tidak ada. Daftar barang. meja. tabel-baris. tabel-sel. kisi. inline-grid

        • blok dan sebaris. Properti 

          

          

          Halaman web html dengan kode sumber
          30 mengontrol tata letak dan aliran elemen HTML. Sebagian besar elemen memiliki nilai default 

          

          

          Halaman web html dengan kode sumber
          _30 dari 

          

          

          Halaman web html dengan kode sumber
          34 (

          ,

          ) atau 


          

          

          Halaman web html dengan kode sumber
          _35 (


          

          

          Halaman web html dengan kode sumber
          0, 


          

          

          Halaman web html dengan kode sumber
          0)

          

          

          Halaman web html dengan kode sumber
          38 dapat digunakan untuk menampilkan elemen sebaris sebagai blok. Misalnya, Di sisi lain, 

          

          

          Halaman web html dengan kode sumber
          _39 dapat digunakan untuk menampilkan inline elemen blok. Misalnya,

        • inline-blok. memadukan elemen dengan aliran teks, sambil memungkinkan kita menggunakan padding, margin, tinggi, dan properti serupa yang tidak memiliki efek yang terlihat pada elemen sebaris
        • tidak ada. TIDAK akan ditampilkan dan tidak memakan ruang (vs. 

          

          

          Halaman web html dengan kode sumber
          _40 tidak akan menampilkan elemen tetapi elemen tersebut masih menggunakan ruang)
        • Daftar barang. tampilkan elemen seolah-olah itu adalah a
        • .
        • tabel, baris tabel, sel tabel. untuk menampilkan elemen (

          ) sebagai

        • , ,
      • kisi. ditampilkan dalam kotak, misalnya,

        • visibilitas. tersembunyi. bisa dilihat. digunakan untuk menyembunyikan atau menampilkan elemen tanpa menghapus elemen dari aliran normal halaman. Artinya, ruang yang ditempati oleh elemen tersebut dipertahankan

        Bagaimana cara membuat halaman web menggunakan HTML dengan kode sumber?

        Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit. .
        Langkah 1. Buka Notepad (PC) Windows 8 atau yang lebih baru. .
        Langkah 1. Buka TextEdit (Mac) Buka Finder > Applications > TextEdit. .
        Langkah 2. Tulis Beberapa HTML. .
        Langkah 3. Simpan Halaman HTML. .
        Langkah 4. Lihat Halaman HTML di Browser Anda

        Bagaimana Anda kode sumber dalam HTML?

        Untuk melihat kode sumber saja, tekan Ctrl + U pada keyboard komputer Anda. Klik kanan bagian kosong halaman web dan pilih Sumber halaman dari menu pop-up yang muncul .

        Bisakah kode sumber ditulis dalam HTML?

        Membangun fondasi situs web menggunakan kode sumber mencakup penggunaan Hypertext Markup Language (HTML) , yang menentukan struktur konten di situs web.

        Bagaimana cara membuat halaman web menggunakan kode sumber HTML dan CSS?

        Rencanakan tata letak Anda. Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan (samar-samar) tampilan yang Anda inginkan. .
        Siapkan 'kode boilerplate'. .
        Buat elemen dalam tata letak Anda. .
        Isi konten HTML. .
        Tambahkan beberapa CSS tata letak dasar. .
        Tambahkan gaya yang lebih spesifik. .
        Tambahkan warna dan latar belakang. .
        Merayakan

    kode html

    Pos Terkait

    Apa gunanya glob di php?
    Apa gunanya glob di php?

    Elemen html dengan atribut javascript
    Elemen html dengan atribut javascript

    Mengembalikan elemen dari daftar python
    Mengembalikan elemen dari daftar python

    Cara menggunakan materi array php
    Cara menggunakan materi array php

    Cara mengubah titik menjadi koma di spreadsheet
    Cara mengubah titik menjadi koma di spreadsheet

    Cara menggunakan tipe javascript
    Cara menggunakan tipe javascript

    Pasta mac excel khusus tidak berfungsi
    Pasta mac excel khusus tidak berfungsi

    Cara menggunakan php mysql error die
    Cara menggunakan php mysql error die

    Bagaimana Anda mengonversi int ke stempel waktu dengan python?
    Bagaimana Anda mengonversi int ke stempel waktu dengan python?

    Bagaimana Anda menambahkan daftar dengan python?
    Bagaimana Anda menambahkan daftar dengan python?

    Periklanan

    BERITA TERKINI

    Bisakah Anda mengaktifkan javascript di ponsel?
    1 years ago . by AdorableMantra
    Bagaimana Anda menghapus teks duplikat dengan python?
    1 years ago . by DecreasingEmperor
    Cara menghapus latar belakang video di CapCut
    1 years ago . by SkepticalDugout
    Apa itu rounddown dalam excel?
    1 years ago . by JollyDollar
    Dapatkan array multidimensi kunci php
    1 years ago . by LuridRecognition
    Cara mengeluarkan darah haid yang tidak keluar
    1 years ago . by CuriousRedundancy
    Dapatkan javascript bulan dengan 0
    1 years ago . by NastyMedics
    Python cetak daftar daftar secara vertikal
    1 years ago . by DeviantColors
    Cara membersihkan kacamata yang tergores
    1 years ago . by Two-storyDealing
    Cara menggunakan variable to dataframe python
    1 years ago . by ThrobbingMetaphysics

    Toplist Popular

    #1
    Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
    1 years ago
    #2
    Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
    1 years ago
    #3
    Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
    1 years ago
    #4
    Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
    1 years ago
    #5
    Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
    1 years ago
    #6
    Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
    1 years ago
    #7
    Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
    1 years ago
    #8
    Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
    1 years ago
    #9
    Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
    1 years ago
    #10
    Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
    1 years ago

    Periklanan

    Terpopuler

    Token Data

    Periklanan

    Tentang Kami

    Legal

    Dukungan

    Social

    homeenfritzhtrjako
    Copyright © 2024 idkuu.com Inc.