Desain halaman web perguruan tinggi menggunakan html

Question

Table of Contents Show

Pengantar HTML
HTML By Examples
HTML Basics
Introduction to CSS
CSS By Examples
, and the 4th rule to all the elements.
accumulates the properties from both rules. It takes the ________71_______43 from Rule 3 (which is not specified in Rule 4); but uses the ________71_______44 from the Rule 4 (instead of Rule 3).
CSS Style Properties
Bisakah saya mendesain situs web dengan HTML?
Bagaimana cara membuat situs web sekolah dalam HTML?
Bagaimana cara mendesain situs web untuk kuliah?
Bagaimana cara membuat situs web perguruan tinggi menggunakan kode HTML dan CSS?

Rancang halaman web untuk Menampilkan detail Perguruan Tinggi Anda dan departemennya menggunakan tag pemformatan teks dasar

<html>
    <head>
        <title>
            College Department Details
        </title>
    </head>
    <body bgcolor="lightgray">
        <h1 align="center" style="color: black;">KR'S SREE NARAYANA COLLEGE</h1>
        <h2 align="center" style="color: black;">Thozhuvanur,Valamchery</h2>
        <h3 align="center" style="color: black;">Afliated to Calicut University</h3>
        <hr>
        <h2 align="center" style="color: black;">About College </h2>
        <p style="font-family:courier";>KR's Sree Narayana College is one of the premier institutions run under the aegis of KR's Sree Narayana Educational Trust, Thozhuvanoor, Valanchery. This institution is a sister concern of KR Bakes, a familiar brand name in the bakery field which has completed 47 years since its inception in 1969. The enviable growth of KR Bakes is attributed to the uncompromising and relentless attitude of the management regarding quality and technological up gradation. Taking lessons from the bakery business that if quality is not compromised, there would be demand for the product, the management of KR Bakes has decided to carry forward their legacy of the bakery business into the field of higher education by starting an Arts and Science college at Thozhuvanoor, Valanchery, one of the educationally backward areas of Kerala.
        </p>
        <h2><b>Courses Offered</b></h2>
        <ul>
            <li>Bsc Computer Science</li>
            <li>Bsc Physics</li>
            <li>Bsc Geology</li>
            <li>Bsc Phycology</li>
        </ul>
        <h2>Department of Computer Science</h2>
        <p style="font-family:courier">To educate the young
             minds with the ability to manage real world problem with the latest technology, 
             to inculcate professional behaviors, strong ethical values, innovative research capability and leadership ability.
              Help the students to explore the depths of computer science, exalt in them and at the same time join hands with the other 
              branches of science to turn something virtual into real and vice versa.</p>
        <h2>Faculties of Computer Science</h2>
        <ol>
            <li>Mrs.Abitha</li>
            <li>Mr.Sreeni</li>
            <li>Mr.Sooraj</li>
            <li>Mrs.Rahmath</li>
        </ol>
        <h3>Condact as </h3>
        <p>Phone Number: 0494 666333</p>
        <p>Email:[email protected]</p>
    </body>
</html>

Keluaran

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

Untuk membuat situs web OMO, saya menyarankan itu

Pahami HTML, CSS, dan JavaScript secara menyeluruh
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
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)?
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
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,
  ,
  1,
  2,
  3,
  4,
  2,
  ),
  4,
  5,
  ), ________10____10___________________________________________________________________________________
  '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. , "
  7", "
  8", "
  9"). Mereka dapat digunakan di
  dan
  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;
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.
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)?

HTML adalah bahasa untuk menerbitkan halaman web di WWW (World-Wide Web, atau World-Wide Wait?)
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
Dokumen HTML adalah dokumen teks, dan dapat dibaca oleh manusia
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 dipublikasikan 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),

1 (untuk Gambar),

0(untuk Anchor atau Hyperlink), untuk menandai dokumen. Tag markup HTML melakukan fungsi-fungsi ini

Layout dokumen, e. g. ,
(tata letak sebagai paragraf),
ke (tata letak sebagai judul tingkat 1 hingga 6),
3 (melakukan jeda baris),
4 (menggambar aturan horizontal), (tabulating data),(layout an ordered list).Provide link (called hyperlink) to another HTML document, via the ________20_______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. 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 ________20_______0,) and attributes (such as ________20_______7, ________20_______8, ________20_______9, ________30_______0, ________30_______1) have been deprecated in HTML 4, in favor of CSS. Do not use nested tables or frame for formatting the document, use and ________20_______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. ________33_______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 "________30_______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? An HTML document begins with a Document-Type Declaration (Line 1) to identify itself as an HTML document to the browser. The HTML content is contained within a pair of ________30_______4 container tags. You can specify the default language of your document via attribute ________30_______5 (for English) inside the opening tag. There are two sections in the document: ________30_______6 and ________30_______7, marked by ________30_______4 and ________30_______4 tags, respectively. In the ________30_______6 section:The ________20_______0 element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the ________43_______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. The ________30_______4 element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window. In the ________30_______7 section:The ________43_______05 container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from ________43_______05 (largest) to ________30_______4. Line 11 uses a ________43_______08 (Heading Level-3). The ________20_______4 standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line). The ________43_______10 container tags (Line 10 and 12) mark the enclosing texts as a paragraph. ________43_______10 is the most frequently-used tag in HTML. The ________43_______12 tags (nested under the ________43_______10 in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested ________43_______14 tags (Line 12) specify "emphasis" rendered in italic; and ________30_______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), ________20_______3 (line break), to (heading level 1 to 6), ________20_______4 (horizontal rule), (unordered list), (ordered list). inline elements: ________20_______0(bold), ________20_______0(italic), ________20_______1 (image), ________20_______0(anchor for hyperlink). table ________30_______4, and then mark the cells of the row via (for header cell) or (for details cell).
The

element can be nested under....I shall illustrate the use of these elements through the following examples.
Example 2: Lists and Hyperlinks
________43_______How it Works?
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.
There are two types of lists in HTML: ordered list and unordered list. An ordered list is marked by ________43_______23 and displayed with numbers; while a unordered list is marked by ________43_______24 and displayed with bullets. Each of the list items is marked by
________30_______4
.You can nest a list inside another list, by placing the complete inner list definition inside a list item
________30_______4
of the outer list.Hyperlink is marked by ________20_______0standalone tag. The attribute ________43_______28 provides the destination URL of the link.
Example 3: Tables and Images
________71_______How it Works?
A table, consisting of rows of cells, can be marked via ________30_______4.
A HTML table is row-centric. You shall first mark a row via
......to provide a caption for the table.Image is marked via the ________20_______1 tag. The mandatory attribute ________43_______31 specifies the path (or url) for the image source file; ________43_______32 gives the alternative text if the image cannot be displayed. I used relative path in the ________43_______31, where "________43_______34" denotes the parent directory. You need to find some images, store them and figure out your own relative path.
The ________20_______1's optional attributes ________43_______36 and ________43_______37 specify the width and height of the image displayed area. They are used here to resize the images for consistent display.
In the ________30_______6 section, I added some so-called style rules under the ________20_______0 tags, so as to nicely display the table. You could ignore the styles now, which will be covered later in the CSS section.
HTML Template
HTML Document Template
________83_______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:
Choose the "Inspector" panel to view your HTML codes.
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
HTML Tags
An HTML opening tag is enclosed by a pair of angle brackets in the form of ________43_______40(e.g.,
, ________43_______41). The tag-name shall be in lowercase.
Tag's Attributes
Attributes, in the form of ________43_______42 pairs can be included in the opening tag to provide additional information about the element.
Example 1: In, the attribute ________30_______5 specifies the natural language for this document.
Example 2: In ________20_______0, the attribute ________43_______45 specifies the character encoding scheme.
Example 3: An ________20_______1 (image) tag may contain these attributes:
________91_______The attribute "________43_______31" specifies the source-URL of the image; "________43_______32" specifies an alternate text, if the image cannot be displayed; "________43_______36" and "________43_______37" specify the width and height of the image displayed area.
Some of the attributes are mandatory (e.g., the "________43_______31" and "________43_______32" attributes of the ________20_______1 tag); while some are optional (e.g., the "________43_______36" and "________43_______37" attributes of the ________20_______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:
________102_______Attributes are written in the form of ________43_______57________43_______58 pairs. The ________43_______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.,
________43_______60
, ________43_______61.There are two types of elements:
Container Element: A container element has an opening tag ________43_______40 that activates an effect to its content, and a matching closing tag ________43_______63 to discontinue the effect. In other words, container elements apply formatting to their contents. For example:________1_______
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., ________20_______4 is used to draw a horizontal rule; ________20_______3 to introduce a manual line-break; and ________20_______1 for embedding an external image.
In XHTML, you need to end a standalone element with a trailing ________43_______67 in the opening tag. For examples:________10_______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,________20_______HTML5 no longer enforces the above rules. Today, most developers omit the trailing ________43_______67 for brevity, e.g., ________20_______3, ________20_______4.
HTML4 has these void elements: ________20_______0, ________20_______0, ________20_______3,
, ________20_______4, ________20_______1, ________20_______0, ________20_______0, ________20_______0, ________20_______0.
HTML5 added ________20_______0, ________20_______0, ________20_______0.Nesting Elements and the Document Tree
An HTML element can be nested within another element, e.g.,
________43_______83



. It is important to properly nest the elements, e.g., the sequence ________43_______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:
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.)
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,________30_______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 ________43_______10 to lay out a paragraph; or insert a manual line-break tag ________20_______3 to break into a new line. In other words, you control the new-lines via the mark-up tags. The ________43_______10 leaves additional space after the paragraph; while ________20_______3 does not.
To get multiple whitespace, use a special code sequence ________43_______89 (which stands for non-breaking space). For example,________43_______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:
________43_______1The ________30_______4 container element defines the extent of an HTML document.
There are two sections: ________30_______6 and ________30_______7:
.. container element defines the ________30_______6 section, which contains descriptions and meta-information of the HTML document. Browsers interpret these descriptions to properly display the body content.
.. container element defines the ________30_______7 section, which encloses the content that users actually see in the browser's window.
The ________30_______6 Section and the ________43_______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 ________43_______97________43_______98
The is the same as:
________43_______2The "________43_______99" is needed to prevent the page from scrolling to the top following ________71_______00.
The inline JavaScript is hard to maintain, and hence, not recommended.
Images
________20_______1 Image Tag (Void Element)
Function: Embed an image inside an HTML document. The syntax is:
________43_______3Example:
________43_______4Attributes:
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 ________43_______36 and ________43_______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 ________71_______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: ________71_______05, ________71_______06, ________71_______07, ________71_______08, ________43_______57.
Using Image as Hyperlink
To use an image as a hyperlink, put the image tag ________20_______1 between ________20_______0and . For example:
________43_______5Image used as hyperlink anchor automatically gets a border. The color of the border is given in the ________20_______9 (unvisited), ________30_______0 (visited), ________30_______1 (active) attributes of the tag (or the ________10_______3, ________10_______4, ________10_______5, and ________10_______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
,
,,
, ________20_______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., ________20_______0,
, ________20_______7, ________71_______22, ________20_______8, ________20_______9, ________30_______1, ________30_______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:
CSS Level 1 (December 1996): CSS1 laid the ground work and introduced the selectors and most of the properties.
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.
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 "________71_______27".
________43_______6A 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 ________20_______0 element, as follows:
________43_______7How it Works?
________71_______29 is a CSS comment. Comments are ignored by the browsers but provide important information to the readers, as well as the author.
A CSS style sheet contains style rules.
A style rule begins with a selector, followed by the list or presentation properties enclosed within ________71_______30.
A property is identified by its ________43_______57, followed by its ________71_______32, separated by colon "________71_______33". The ________71_______34 pairs are separated by semicolon "________71_______35". A ________43_______57 could have multiple ________71_______32s, separated by commas "________71_______38" (e.g., the ________71_______39 property).
A selector selects a set of HTML elements to apply the styles. This example uses the so-called ________71_______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.
Selectors having the same rules can be grouped together and separated by commas "________71_______38". For example, the 2nd rule is applicable to to.
Some of the properties are inherited by the nested elements. For example, the nested under inherits the ________71_______39 from the . Some properties are not inherited.
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 ________71_______43 from Rule 3 (which is not specified in Rule 4); but uses the ________71_______44 from the Rule 4 (instead of Rule 3).

Style properties:The ________71_______39 list the font faces, in the order of preferences. Browsers search through the list (from the beginning) to an available font face. ________71_______22 and ________71_______47: specify the foreground and background colors, respectively. Color can be expressed in ________71_______48 (hex value), ________71_______49 (decimal value between 0 and 255), or with the pre-defined color names (such as ________71_______50, ________71_______51). ________71_______52: text alignment of either ________71_______53, ________71_______54, ________71_______55, ________71_______56. ________71_______57: ________71_______58, ________71_______59, and others. ________71_______60: ________71_______58, ________71_______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 __20_0`

________43_______8We shall use the following HTML document to test the CSS:
________43_______9How it Works?
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 ________71_______64 attribute; and ID-selector which selects an element based on the ________1_______1 attribute.
An ID-Selector begins with a ________71_______66 sign, followed by an ________1_______1-name, e.g., ________71_______68 and ________71_______69, which select element with ________71_______70 and ________71_______71, respectively. Since ________1_______1-value is meant to be unique within an HTML document, ID-selector select at most one element.
A Class-Selector begins with a dot "________71_______73" followed by a ________71_______64-name, e.g., ________71_______75 and ________10_______7, which select all elements with ________71_______77 and ________71_______78, respectively. Unlike ________1_______1-value that is unique, many elements can have the same ________71_______64-name.
In the test HTML document, we partition the body into three sections, via. We assign a unique ________1_______1 to each
, i.e.,
,
 and
 to semantically identify their contents, and use the ID-Selectors ________71_______68 and ________71_______69 to apply styles to the
's.
Similarly, we mark texts with ________20_______0 and ________20_______0, and use the Class-Selectors ________71_______75 and ________10_______7 to apply styles to these texts.
Take note that: is a block element, while ________20_______0 is a inline element.
The ________71_______64 attribute can take multiple values, as in ________71_______90 (Line 18). Both styles are applied.
HTML ________1_______1 vs ________71_______64 Attributes
________1_______1 and ________71_______64 are used to reference HTML elements by JavaScript and CSS. ID can also be used as the target of HTML anchors.
________1_______1 must be unique in an HTML document, but ________71_______64 needs not.
An element can have one ________1_______1, but many ________71_______64es.
CSS's ID-selector begins with ________71_______66 (e.g., ________71_______68), Class-selector begins with dot (________71_______73) (e.g., ________83_______02).
For example,
Recommendation: Use ID for JavaScript and internal ________20_______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:
F12 to launch Web Developer Tools.
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.
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:
A style rule consists of a selector which selects the HTML elements it operates upon, and a list of style property ________71_______34 pairs enclosed in braces ________71_______30, as follows:________71_______0For example, This selector selects the tag. Hence, the defined style is applied to the ________30_______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.
The ________71_______34 pairs are separated by semicolon "________71_______35". You can omit the last semi-colon before the closing brace "________83_______09". But I recommend that you keep it, so that it is easier to include new entries without a missing "________71_______35".
The ________43_______57 and ________71_______32 are separated by a colon "________71_______33" in the form of ________71_______34.
Multiple ________71_______32s for the same property ________43_______57 are separated by commas "________71_______38" (as in the ________71_______39). However, multiple parts of the same property ________71_______32 are separated by space "________43_______89" (as in the ________83_______21, which has a value with 4 parts).
Values containing space must be quoted, e.g., "________83_______22" or ________83_______23.
Extra whitespaces (blank, tab and newline) are ignored.
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 "________71_______38". For example, the following rule apply to elements to:________71_______1
Comments can be inserted inside the style sheet enclosed between ________83_______25 and ________83_______26. The end-of-line comment ________83_______27 is not applicable in CSS?!
CSS Syntax vs. HTML Syntax
CSS and HTML have different syntaxes!!! For example, HTML's attributes uses "________83_______28" to separate the ________43_______57 and ________71_______32, in the form of ________43_______42; the name-value pairs are separated by spaces, as follows:
________43_______4Inline, Internal and External Styles
There are three places where you can define style rules:
Inline Style: Included inside a particular HTML opening tag's via attribute ________83_______32. The rules are applicable to that particular HTML element only.
Internal (Embedded) Style Sheet: Embedded inside the ________20_______0 tags in the ________30_______6 section of the HTML document. The styles are applicable to that entire document.
External Style Sheet (Recommended): Stored in an external file, which is then linked to HTML documents via a ________20_______0 element in the ________30_______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 ________83_______37 attribute of the opening tag. For example,
________71_______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 ________43_______57 and ________71_______32 are separated by colon ________83_______40, and the ________71_______34 pair are separated by semicolon ________83_______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 ________20_______0 tags in the ________30_______6 section. For example,
________71_______4The scope of the embedded styles is the current HTML document.
Embedded styles separate the presentation and content (in the ________30_______6 and ________30_______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 ________83_______47 in ________20_______0



________83_______49
The border property is inherited.
Although the first ________20_______0is nested under the
tag, the ________71_______06 property is not inherited from the ancestor. That is, you will not see a border around the ________20_______0's content. We can force the inheritance by assigning a special value "________83_______53" as shown in the Class Selector ________83_______54.
Resolving Conflicting Rules
Style Conflict
Style conflict on an element arises:
A property is inherited from multiple ancestors.
More than one rules are applicable to the element. For example, Tag-selector ________10_______2, Class-selector ________83_______56 and ID-selector ________83_______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 ________10_______2 Tag-selector is the most general, which selects all the
elements; the ________83_______59 Class-selector selects a class of
elements with attribute ________83_______60; the ________83_______61 and ________83_______62 ID-selectors select only one element each with a unique ________1_______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 ________83_______64, the latter takes effect.
The inline style (applied to a specific tag via ________83_______37 attribute) overrides the internal style (defined in ________20_______0
________83_______67
::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the ________71_______22 and ________71_______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 ________83_______70 represent beginning in regex.)
T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol ________83_______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 ________83_______72, td is the first child of the parent.
:nth-child(odd), :nth-child(even): E.g., ________83_______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 ________83_______74 select the first.
T:nth-of-type(odd), T:nth-of-type(even): E.g., ________83_______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.
________83_______76 Pseudo-class Selector
Select elements whose value is in the permitted range, for giving positive feedback, e.g.,
________83_______77 Pseudo-class Selector
The ________83_______78 selector lets you select elements not meeting the criterion in selector ________83_______79. For example, ________83_______80 select elements not belonging to class ________83_______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 ________71_______22 and ________71_______47 Properties
Specifying Color
Color can be expressed as:
RGB hexadecimal triplets in the form of ________83_______84, where ________83_______85, ________83_______86, ________83_______87 are values of red, green and blue. The values are between ________83_______88 and ________83_______89, in hexadecimal. For example, ________83_______90. The color value ________83_______91 can be shorthand as ________83_______92.
RGB in the form of ________83_______93. The ________83_______94, ________83_______95, ________83_______96 can be expressed in a decimal value between ________83_______97 and ________83_______98; or in percentage between ________83_______99 and ________91_______00. I prefer the decimal form over the hex triplets as it is easier to visualize the values.
RGBA in the form of ________91_______01: RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with ________91_______02 for opaque; and ________91_______03 for totally transparent.
HSL in the form ________91_______04: Hue is the color on the color wheel in degrees between ________83_______97 to ________91_______06. Saturation (purity of color) is expressed in percentage between ________83_______99 and ________91_______00 (pure color). Lightness (brightness or intensity) is also expressed in percentage between ________83_______99 (darkest) and ________91_______00 (brightest).
HSLA in the form of ________91_______11.
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 ________91_______12, ________91_______13, etc.
CSS Color Properties
The most important color properties are ________71_______22 and ________71_______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 ________91_______16 and NOT inherited, so as to create a see-through effect. The ________91_______17 sets to its default value.
CSS Length Measurements
Many CSS properties, such as ________43_______36, ________43_______37, ________83_______21, ________71_______06, ________91_______22, ________91_______23 and ________91_______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. ________91_______25 is not commonly used.
px: ________91_______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, ________91_______27 set the table's ________43_______36 to 80% of the ________43_______36 of the parent (probably a or ).
em: the width of the letter ________91_______30 of a referenced font, generally, the current font.
For example, ________91_______31 means that the margins are twice the current (referenced) font-size.
However, if ________91_______32 is used to set the ________91_______23 property, it needs to find a reference. In this case, it is referenced to the parent's ________91_______23. For example, ________91_______35 sets the ________91_______23 of to 1.2 times of the parent (possibly a
or ).
rem (CSS3): relative to the ________91_______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. ________91_______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 ________91_______39 and ________91_______32 measurement are relative to another element (percentage values are always relative, e.g., ________91_______41 of something). For example,
To add to the confusion, some properties, such as ________91_______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 ________91_______43, the bare number is measured in pixels.
Recommendation
Define a ________91_______23 for .
Use ________91_______45 for ________91_______23 of other elements - relative to .
Use ________91_______32 for other properties such as ________83_______21 and ________91_______22, which is relative to the current ________91_______23.
Use other relative measurement such as ________91_______39 if appropriate. Avoid absolute measurements.
For example,
CSS Box Model and Properties ________83_______21, ________71_______06, ________91_______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.
The content area contains the texts, image, or child elements.
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.
The border goes between padding and margin. You can set a color and a style (such as solid, dash, dotted) to the border.
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 ________43_______36 and ________43_______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:
________71_______5The actual width of the element is ________91_______57.
Each of the rectangular bounds has four sides, and can be individually referred to as ________91_______58, ________91_______59, ________91_______60, and ________91_______61 in a clockwise manner, where ________91_______62 could be ________83_______21, ________71_______06 or ________91_______22. The four sides can be controlled individually or as a group.
Inspecting the Box Model via Web Developer Tools
[TODO]
CSS ________43_______36 and ________43_______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 ________43_______36 and ________43_______37 are specified in units such as ________91_______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., ________91_______71 or ________91_______72. Take note that ________91_______73 is meaningless in CSS (this is a very common error!) However, in HTML, ________91_______43 means 400 pixels.
The ________43_______36 and ________43_______37 properties are NOT inherited by its descendants. The default value is "________91_______77", which lets the browser to compute a suitable value. We shall discuss "________91_______78" value later.
CSS ________83_______21, ________71_______06 and ________91_______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 "________91_______82" shall be expressed in a proper unit (e.g. ________91_______83 and ________91_______84). You could use a negative value to overlap two elements (e.g., ________91_______85). The value of "________91_______77" lets the browser to compute an appropriate number. "________91_______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 ________91_______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 ________83_______21.
border-width: thin|medium|thick|n
Set the width of the four borders. "________91_______82" can be used to set an absolute thickness. ________91_______91 is a shorthand notation, you can use ________91_______92, ________91_______93, ________91_______94, and ________91_______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 ________91_______96, ________91_______97, ________91_______98, and ________91_______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 ________102_______00, ________102_______01, ________102_______02, ________102_______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 ________102_______04, ________102_______05, ________102_______06, and ________102_______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 ________91_______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 ________102_______09).
border-image: can be used to create a multi-color border.
Example [TODO]
CSS ________102_______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 ________71_______06.
outline-width:
________91_______78
For most of the block elements (e.g.,
,
), the default of ________91_______78 sets the width to the width of the parent minus its own margin, border and padding. Images ________20_______1 have an ________91_______77 width equals to its actual width. Float elements have ________91_______77 width of 0.
Example: [TODO]
Filling the Width of the Containing Element
Browser would automatically adjust the ________102_______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 ________43_______36, ________102_______19, ________102_______05 and the left margin/border/padding.
Example: [TODO]
Center a Block Element
To center a block element, you set the ________102_______21 and ________102_______17 to ________91_______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.
________71_______6CSS ________102_______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: ________102_______25 (with small tails), ________102_______26 (without small tails), ________102_______27, ________102_______28, ________102_______29. Use ________102_______27 for program listing. Use ________102_______26 for computer display. ________102_______25 are mainly used in prints (such as "Times" for newspapers and books).
font-size: ________102_______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 ________71_______62 uses italic font installed (some font families include the italic version); while the ________102_______35 is done by tilting the normal font.
font-variant: normal|small-caps
The ________102_______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,________71_______7is the same as:________71_______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:
Add a ________20_______0 to CSS (in your HTML's ________30_______6 section, e.g.,________71_______9
Use a ________102_______39 in your CSS (you need not update all your HTML pages):________83_______0
CSS ________102_______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 ________102_______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 "________102_______42" and considers it as a legacy of typewriter. "________102_______43" is even worse!
text-transform: none|uppercase|lowercase|capitalize
The ________102_______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 "________102_______45" (pre-formatted), preserve the white-spaces.
CSS ________102_______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 ________91_______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 ________102_______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.list-style-position: inside|outside: Define whether the list item marker shall be inside or outside the item element.
list-style-image: none|url(imageURL): Use an image as the list item marker.
(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 ________102_______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:
Client-side image map: browser at the client-side handles the mapping of hot-regions to links.
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:
Define a image map using ________30_______4 and define the hot-regions in the map using the ________20_______0 tags. Decide what link maps to which hot-region. Hot regions can take circle, rectangle, or polygon in shape.
In the ________20_______1 tag, add the attribute ________102_______53 to indicate this image is used as a client-side image map.________83_______1
Example:
________83_______2Client-side Image Map Tags - ________20_______0 and ________20_______0
Function: To set up a client-side image map with hot regions.
Syntax (map: Container tag, area: Standalone tag)
________83_______3________20_______0's attributes:
________102_______57: declares a unique name for the map, to be targeted in attribute ________102_______58 of the ________20_______1.
(The attribute ________43_______57 is used the older browsers. XHTML specifies using ________1_______1 instead, which automatically create a named anchor.)
________20_______0's attributes:
________102_______63: define the shape of the hot region. The "default" value for any point not part of another hot region.
________102_______64: list of coordinates that made up the hot region.For ________102_______65, ________102_______66 to specify the upper-left and lower-right corners.
For ________102_______67, ________102_______68, where ________102_______69 is the center and ________83_______94 is the radius.
For ________102_______71, ________102_______72, where ________102_______73 are coordinates that made up the polygon. You should close the polygon by putting ________102_______74 as the last coordinates.
________43_______28: gives the target URL of the hyperlink.
________102_______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 ________20_______1 tag, include the "________102_______78" (is server map?) attribute, and wrap the ________20_______1 within an anchor ________102_______80. For example,
________83_______4When the image is clicked, the ________102_______81 position of the click is send to the server as query parameters. For example,
________83_______5It is up to the server to decide on how to process the ________102_______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:
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.
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:
________30_______4: to sub-divide the window.
: defines each of the frames in a frameset.
________30_______4: for floating or inline or internal frame.
________30_______4: alternative text if frame is not supported by browser.
Frame Set ________30_______4
Function: To divide the window into multiple frames, row-wise or column-wise. ________30_______4 can be nested for complex layout. ________30_______4 is to be used in place of ________30_______4 tag. i.e., there should not have an tag in the document with .
Syntax:
________83_______6Attributes:
________102_______90: a list of frame sizes in pixels or percentage separated by commas. Wildcard "________102_______91" can be used to indicate the remaining space.
Example:
________83_______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:
________83_______8Attributes:
________102_______92: provides the URL of the document to be displayed inside this frame.
________43_______57: specifies an unique identifier, to be used as the target of other tags, such as ________20_______0, ________20_______0.
________102_______96: suppresses resizing by dragging of border.
________102_______97: sets to 1 to show the border, 0 to suppress.
________102_______98: "________102_______99" to show scrollbars and allow scrolling; "________1_______00" to suppress scrolling; and "________91_______77" to let the browser to decide (e.g., auto-hide).
Example: Divide the screen into 3 frames, top, left and right.
________83_______9Targeting Named Frame
To control which frame to receive the content of a hyperlink, you could include the ________1_______02 attribute in the ________20_______0tag. Using the previous example, a hyperlink in the "________1_______04" frame targeting the "________1_______05" frame is:
________91_______0If all the links in the "________1_______04" frame are targeting the "________1_______05" frame, you can use the ________20_______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 ________30_______4
Function: Provides an alternative text if the browser does not support framed layout. ________20_______0 must be placed within a .
Syntax (Container tag):
________91_______1Iframe (Inline Frame or Internal Frame) ________30_______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 ________43_______31 attribute.
Syntax (Container tag):
________91_______2You 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:
________30_______4: for embedded Java Applets (deprecated in HTML 4 in favor of tag).
________30_______4: for embedded an executable programs.
________20_______0: providing runtime parameters to and .Java Applet ________30_______4
Function: Embedding a Java Applet. Deprecated in HTML 4 in favor of .
Syntax (Container tag):
________91_______3Program Object ________30_______4 and Parameter ________20_______0
Function: Embed an executable program and provide the program parameters. ________20_______0 must be nested inside an or .
Syntax (Container tag), ________20_______0 (Standalone tag):________91_______4
HTML Global Attributes
The global attributes are applicable to ALL the HTML elements.
class="classname": specifies the subclass this tag belongs to. The ________71_______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 ________1_______22 or ________1_______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 ________1_______1 value, while many tags can belong to the same ________71_______64. The ________1_______1 attribute is used by CSS for applying styles (via the id-selector in the form of ________1_______27), and JavaScript for manipulating the element (via ________1_______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 ________1_______29 (left-to-right) or ________1_______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 ________43_______57 of the target frame.
: embedded style rules applicable to this document.
: program scripting codes.
Base-URL and Default Target Name ________20_______0
Function: Declare the base URL for all the links in this document via attribute "________1_______33", and specify the target name via attribute "________1_______02".
Syntax:
________91_______5Attributes:
href="baseUrl": All relative URLs in this document are relative to this base-URL. For example, if ________20_______0’s ________1_______33 is set to:________91_______6then, the relative URL of "________1_______37" is resolved to "________1_______38".
target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "________1_______39" in new window, "________1_______40" in this frame, "________1_______41" in the parent frame, "________1_______42" in the full body of the window.
Link Resources and Relationship ________20_______0
Function: Link to another resource and indicate its relationship. There could be more than one ________20_______0 tags in the HEAD section.
Syntax:
________91_______6Attributes:
rel, rev: indicates the forward or reverse relationship to the current document. Take value of ________1_______45, ________1_______46, ________1_______47, ________1_______48, ________1_______49, ________1_______50, ________1_______51, ________1_______52, ________1_______53, ________1_______54, and ________1_______55 (i.e., author).
[TODO] other attributes.
Example:
________91_______8The above ________20_______0 tags indicate that "________1_______57" is the stylesheet of MIME type "________1_______58"; "________1_______59" is the home page; "________1_______60" is the help page; this page ("________1_______61") is the previous page of "________1_______62" (in a reverse relationship), and this page is the next page of "________1_______63".
The most-commonly used ________20_______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 "________1_______65".
To include an icon, provide a ________20_______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 ________20_______0
You can use ________20_______0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:
________71_______9Examples:
________91_______6The ________20_______0 tag can also be used to ask the server to insert an HTTP response header (read "HTTP Basics"). The syntax is as follow:
________71_______9EXAMPLE 1: Auto-Redirect after x seconds
________102_______2The above ________20_______0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:
________102_______3The browser, in response to this response header, redirect to the given URL after 3 sec.
EXAMPLE 2: Auto-Refresh every x seconds
________71_______9EXAMPLE 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:
________102_______5Embedded Style Definition ________20_______0
Function: For embedded style declarations, covered earlier.
Scripting Codes ________20_______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:
The name of the variables shall begin with two dashes (________1_______73), e.g., ________1_______74.
To reference the variable, use ________1_______75.
To define global-scope CSS variables, place them in the ________1_______76 pseudo-class.
For examples,
________102_______6Modifying CSS Properties from JavaScript and jQuery
To modify the styles of an HTML element from JavaScript, set its ________83_______37 property, e.g.,
________102_______7To modify the style of an HTML element from jQuery:
CSS ________1_______78 Property - Positioning the HTML Block Elements
position: static|absolute|relative|fixed|inherit|initial|unset
You can use the property ________1_______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 (________1_______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 (________1_______81_) atau jendela browser (
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
82); 
Untuk elemen posisi 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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

54, 



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  There are two types of lists in HTML:
  
    Ordered List.
    Unordered List.
  
 
  This is a nested unordered list of links:
  
    Online Validator:
      
        W3C Online HTML Validator @ https://validator.w3.org/.
        W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
      
    
    Specifications:
      
        HTML5 @ http://www.w3.org/TR/html5/.
        CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
      
    
  

36, 



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  There are two types of lists in HTML:
  
    Ordered List.
    Unordered List.
  
 
  This is a nested unordered list of links:
  
    Online Validator:
      
        W3C Online HTML Validator @ https://validator.w3.org/.
        W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
      
    
    Specifications:
      
        HTML5 @ http://www.w3.org/TR/html5/.
        CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
      
    
  

37
atas. kiri. bawah. Baik. 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. 
_77 default menumpuk elemen pada tingkat 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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

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. Sebagai contoh,



_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. , 



_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
Sebagai contoh,
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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

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
      
    
    
      2.
      CSS3
      
    
    
      3.
      JavaScript
      
    
  

54 (atau 



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  There are two types of lists in HTML:
  
    Ordered List.
    Unordered List.
  
 
  This is a nested unordered list of links:
  
    Online Validator:
      
        W3C Online HTML Validator @ https://validator.w3.org/.
        W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
      
    
    Specifications:
      
        HTML5 @ http://www.w3.org/TR/html5/.
        CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
      
    
  

36 dan 



  
  Lists and Hyperlinks


  Lists and Hyperlinks
  There are two types of lists in HTML:
  
    Ordered List.
    Unordered List.
  
 
  This is a nested unordered list of links:
  
    Online Validator:
      
        W3C Online HTML Validator @ https://validator.w3.org/.
        W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
      
    
    Specifications:
      
        HTML5 @ http://www.w3.org/TR/html5/.
        CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
      
    
  

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 


_12 dan 


13 Properti - Mengambang Elemen Kiri atau Kanan
mengambang. kiri. Baik. tidak ada
Anda dapat mendorong elemen ke tepi kiri atau kanan elemen penampung melalui properti 



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 



13, dan tentukan sisi mana (kiri, kanan atau keduanya) yang tidak mengizinkan elemen mengambang
jernih. kiri. Baik. keduanya. tidak ada



_16 berarti sisi kiri elemen ini tidak boleh menjadi elemen mengambang. Artinya, kiri harus dimulai dengan margin kiri elemen yang memuatnya. 


_16 mirip dengan 



3
Menggunakan 


_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 



_12 untuk membuat kolom atau kisi
[TODO] lagi
Contoh. Memposisikan Iframe
"



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



_22"
<tag-name attName1="attValue1" attName2="attValue2" ...> .. tag-name>
_9Properti CSS 



_23 (juga berlaku untuk 



1) mengapungkan iframe ke margin kiri atau kanan jendela browser
Anda juga dapat menggunakan properti CSS 



_25 untuk memposisikan iframe (dan elemen HTML lainnya), "


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.
_0CSS 


_30 dan 


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


_30 mengontrol tata letak dan aliran elemen HTML. Sebagian besar elemen memiliki nilai default 


_30 dari 


34 (,
) atau 



_35 (



0, 



0)



_38 dapat digunakan untuk menampilkan elemen sebaris sebagai blok. Misalnya, Di sisi lain, 


_39 dapat digunakan untuk menampilkan inline elemen blok. Sebagai contoh,
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. 


_40 tidak akan menampilkan elemen tetapi elemen 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
 
Bisakah saya mendesain situs web dengan HTML?
HTML adalah bahasa markup standar untuk membuat situs web dan CSS adalah bahasa yang menjelaskan gaya dokumen HTML. 
Bagaimana cara membuat situs web sekolah dalam HTML?
Editor HTML . 
 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. Tulis atau salin kode HTML berikut ke Notepad. . 
 Langkah 3. Simpan Halaman HTML. Simpan file di komputer Anda. . 
 Langkah 4. Lihat Halaman HTML di Browser Anda
 
Bagaimana cara mendesain situs web untuk kuliah?
Cara Merancang dan Membangun Situs Web Sekolah atau Universitas . 
 Rencanakan struktur situs. . 
 Perkuat branding & pesan sekolah Anda. . 
 Tulis konten Anda. . 
 Pilih gambar yang tepat. . 
 Pastikan memuat secepat kilat. . 
 Pastikan situs web Anda responsif seluler. . 
 Tetap ramah mesin pencari. . 
 Aktifkan analitik pelacakan
 
Bagaimana cara membuat situs web perguruan tinggi menggunakan kode HTML dan CSS?
Berikut adalah panduan tentang cara memasangnya di komputer Anda.  . 
 Pelajari Dasar-dasar HTML. . 
 Memahami Struktur Dokumen HTML. . 
 Kenali Pemilih CSS. . 
 Kumpulkan Lembar Gaya CSS. . 
 Unduh / Pasang Bootstrap. . 
 Pilih Desain. . 
 Kustomisasi Situs Web Anda Dengan HTML dan CSS. . 
 Tambahkan Konten dan Gambar

kode html

Desain halaman web perguruan tinggi menggunakan html

Keluaran

Pengantar HTML

Apa itu HTML (HyperText Markup Language)?

Versi HTML

Tag Markup

Separating Content and Presentation

HTML Authoring Tools

HTML By Examples

Example 1: Basic Layout of an HTML Document

How it Works?

View Page Source

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

Most Frequently-Used HTML Elements

Example 2: Lists and Hyperlinks

How it Works?

Example 3: Tables and Images

How it Works?

HTML Template

HTML Document Template

HTML Document Validator

Debugging HTML

F12 Debugger (Web Developer Tools)

HTML Basics

HTML Tags, Attributes and Elements

HTML Tags

Tag's Attributes

HTML Elements

Nesting Elements and the Document Tree

Rendering HTML Pages

The Basic Document Skeleton

The Element and its Child Elements and

Images

________20_______1 Image Tag (Void Element)

Using Image as Hyperlink

Introduction to CSS

Why Style Sheet?

CSS Specifications

What is a Style Sheet?

CSS By Examples

CSS Example 1: CSS Syntax and Tag-Selectors

How it Works?

, and the 4th rule to all the elements.

. The

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

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

How it Works?

HTML ________1_______1 vs ________71_______64 Attributes

Validating CSS

Inspecting Element's Styles via F12 Web Developer Tools

CSS Basics

CSS Syntax

CSS Syntax vs. HTML Syntax

Inline, Internal and External Styles

Inline Styles

Internal (Embedded) Styles

Resolving Conflicting Rules

Style Conflict

Nearest Ancestor Wins

Specificity

Locality

Attribute Selectors

Child Pseudo-Class Selectors (CSS3)

Type Pseudo-class Selector (CSS3)

________83_______76 Pseudo-class Selector

________83_______77 Pseudo-class Selector

There are many more pseudo-class selector!

CSS Style Properties

CSS ________71_______22 and ________71_______47 Properties

Specifying Color

CSS Color Properties

CSS Length Measurements

Recommendation

CSS Box Model and Properties ________83_______21, ________71_______06, ________91_______22 and Content Area

Inspecting the Box Model via Web Developer Tools

CSS ________43_______36 and ________43_______37 Dimension Properties

CSS ________83_______21, ________71_______06 and ________91_______22 Properties

More Margin Properties

More Border Properties

CSS ________102_______10 Properties

__20_1 Image Tag (Void Element)

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

`CSS Example 2: CSS Class-Selector, ID-Selector with and __20_0`

HTML ____1_1 vs 71_64 Attributes

__83_76 Pseudo-class Selector

__83_77 Pseudo-class Selector

CSS ____71_22 and 71_47 Properties

CSS Box Model and Properties ____83_21, __71_06, 91_22 and Content Area

CSS ____43_36 and 43_37 Dimension Properties

CSS ____83_21, __71_06 and 91_22 Properties

CSS __102_10 Properties

__91_78

CSS __102_24 Properties

CSS __102_40 Properties

CSS __102_46 Properties

CSS __102_48 Properties

Client-side Image Map Tags - ____20_0 and 20_0

Frame Set __30_4

No Frame __30_4

Iframe (Inline Frame or Internal Frame) __30_4

Java Applet __30_4

Program Object ____30_4 and Parameter 20_0

`HTML Global Attributes`

`HEAD Section's Tags`

`Base-URL and Default Target Name __20_0`

Link Resources and Relationship __20_0

Meta Information __20_0

Embedded Style Definition __20_0

Scripting Codes __20_0

CSS __1_78 Property - Positioning the HTML Block Elements

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.
_83

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

CSS

_12 dan

13 Properti - Mengambang Elemen Kiri atau Kanan

Menggunakan

_12 untuk membuat kolom

CSS

_30 dan

31 Properti