Beranda
Pemrograman Berbasis Web

Pemrograman Berbasis Web : HTML 2 dan HTML Selector

Pemrograman Berbasis Web : HTML 2 dan HTML Selector



HTML Layout



HTML Container


Two generic tags with no intended purpose or style: 

  • <div> : a generic block element 
  • <span> : a generic inline element


HTML <div> Element


The <div> element is a block-level element that is often used as a container for other HTML elements. The <div> element has no required attributes, but style and class are common. When used together with CSS, the <div> element can be used to style blocks of content:



HTML <span> Element

The <span> element is an inline element that is often used as a container for some text. The <span> element has no required attributes, but style and class are common. When used together with CSS, the <span> element can be used to style parts of the text:



Multiple generic containers

But won't we often want multiple generic containers? How do we distinguish two generic containers? In other words, how do we select a subset of elements instead of all elements on the page?

Solution : use HTML identifier


HTML id

Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore (not a number or any other character). Giving an element a unique identity allows us to style it differently than any other instance of the same element on the page.


HTML class

Every HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, we want a way to identify several elements as being different from the other elements on the page.


HTML id and class attribute



For example: 

  • We want to assign one paragraph within the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs. 
  • We have some paragraphs of text that contain information that is more important than others and want to distinguish these elements 
  • We want to differentiate between links that point to other pages on our own site and links that point to external sites.

class and id are special HTML attributes that can be used on any HTML element


  • class: Used on 1 or more elements; identifies a collection of elements 
  • id: Used on exactly 1 element per page; identifies one unique element. 


Can apply multiple classes by space-separating them: <span class="hw new">HW1</span>


HTML Layout



Why not <div> everywhere ?


Technically, you can define your entire web page using <div> and the class attribute. 

  • Is this a good idea? 
  • Why does HTML have ids when you have classes? 
  • Why does HTML have <p>, <h1>, <strong>, etc. when you have <div>, <span>, class, and id?


HTML Layout Using HTML 5



HTML5 offers new semantic elements that define different parts of a web page:


  • <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements. 
  • <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g. a single blog post.) 
  • <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g. a mini map, or a set of article headlines and summaries.) It's considered best practice to begin each section with a heading;
  • <aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.) 
  • <header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings.) 
  • <nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation. 
  • <footer> represents a group of end content for a page.




IFrames

An iframe is like a little window that has been cut into your page — and in that window we can see another page. The term iframe is an abbreviation of inline frame. One common use of iframes is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web).

An iframe is created using the <iframe> element. There are several important attributes: 

  • src 
    • The src attribute specifies the URL of the page that we wish to show in the iframe. 
  • height 
    • The height attribute specifies the height of the iframe in pixels. 
  • width 
    • The width attribute specifies the width of the iframe in pixel

There are several important attributes:


  • scrolling 
    • Scrollbars allow the user to move around the frame to see more content. It can take one of three values: yes (to show scrollbars), no (to hide scrollbars) and auto (to show them only if needed). 
  • frameborder 
    • It indicates whether the frame should have a border. A value of 0(zero)indicates that no border should be shown. A value of 1(one) indicates that a border should be shown. 
  • seamless 
    • can be applied to an iframe to make it looks like it is a part of the containing document





Selector



HTML DOM

Document Object Model



Accessing and changing the HTML page


The DOM defines properties and methods to access and change each object in this model. The effect is that what the user sees in the browser window is updated. The DOM is an API (Application Programming Interface) - it lets the browser and your JavaScript program or CSS talk to each other 


  • It states what your script can ask the browser about the current page 
  • It states how your script can tell the browser to update what is being shown to the user

Selector



There are many different types of selector that allow you to target rules to specific elements in an HTML document. Selectors are case sensitive, so they must match element names and attribute values exactly.




Grouping selectors




What does this select ? 

#main li.important strong { 

color: red; 

} 

Read from right to left: 

<strong> tags that are children of <li> tags that have an "important" class that are children of the element with the "main" id.


2 Common bugs Selector




  • p.abc vs p .abc 
    • A <p> element with the abc class vs An element with the abc class that descends from <p> 
  • p .abc vs p, .abc 
    • An element with the abc class that descends from <p> vs All <p> elements and all elements with the abc class


Other selector

https://www.w3schools.com/cssref/css_selectors.asp
  • Useful selector (subjective) : 
    • [attribute=value] 
    • :active 
    • :hover 
    • :disabled 
    • :not(selector) 
    • :first-child 
    • :last-child 
    • :nth-child(n)


Extra : Inside <head>




  • title : metadata that represents the title of the overall HTML document 
    • example : <title>My test page</title> 
  • specify encoding 
    • example : <meta charset="utf-8"> 
  • author and description 
    • example: <meta name="author" content="Chris Mills"> 
  • <meta name="description" content="The MDN Web Docs site ......"> 
  • Keyword 
    • example : <meta name="keywords" content="HTML, CSS, XML, JavaScript">
  • Icon 
    • example : <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
  • Language 
    • example : <html lang="en-US"> 
  • Other metadata 
    • Facebook Open Graph Data 
    • Twitter

Sumber

https://www.w3schools.com/html

https://www.w3schools.com/cssref/trysel.asp 

https://www.w3schools.com/css:

Posting Komentar

© ‧ Dipinterin. All rights reserved. Developed by Dipinterin