Paragraphs at Headlines

Paragraphs at Headlines

Ang structure ng content ay madalas na binubuo ng mga paragraph at heading.

Paragraphs

Sa nakaraang lesson nalaman natin na ito ang hitsura ng HTML tags, particularly ang paragraph tags:

<p>This is a paragraph.</p>

Pero talaga bang kailangan nito? Pansinin ang sumusunod na code. Wala itong mga paragraph tags, pero mapapansing paragraphs sila dahil may mga line breaks sa pagitan nila:

Payload derisively to french the I we sleep who bed can after alphabet throughout self-interest, pattern. Impatient good and play tones. The of arrives view box to see its the and on voices was is entered ambushed and as and carefully fundamental; Came finger. Fitted working had spirits by a of were of in don't ideas the records somewhere, never office lower of which for and and rationale and might the might for got after at the writing together into their of least various a frequencies hand. On the which people now son, multi forest longer of nor poetic he.


And is of isn't that I bedding to dressing the at I having boss's succeeding, intention long have pile self-interest, instance. Rely are along the eating that writing that of just to the our rely where himself right for would was even on some big you stands clock he the my but just next theoretically then an their it acquired in pink up the to design self-interest, the into a to each customary cheek, or a his furnished be thin people one reflection royal the if to field way. And tones point to be it be right the area the.

Pero kapag tiningnan natin ito sa browser:

See the Pen Paragraphs with no tags by Francis Rubio (@maniczirconium) on CodePen.

Sa browser, isa lang itong malaking bulto ng text. Hindi nare-recognize ng browser na dalawang magkahiwalay na paragraph ito. Maayos natin iyan kapag nilagay natin sila sa dalawang magkahiwalay na paragraph tags.

<p>Payload derisively to french the I we sleep who bed can after alphabet throughout self-interest, pattern. Impatient good and play tones. The of arrives view box to see its the and on voices was is entered ambushed and as and carefully fundamental; Came finger. Fitted working had spirits by a of were of in don't ideas the records somewhere, never office lower of which for and and rationale and might the might for got after at the writing together into their of least various a frequencies hand. On the which people now son, multi forest longer of nor poetic he.</p>

<p>And is of isn't that I bedding to dressing the at I having boss's succeeding, intention long have pile self-interest, instance. Rely are along the eating that writing that of just to the our rely where himself right for would was even on some big you stands clock he the my but just next theoretically then an their it acquired in pink up the to design self-interest, the into a to each customary cheek, or a his furnished be thin people one reflection royal the if to field way. And tones point to be it be right the area the.</p>

Kapag tiningnan natin ito sa browser, ganito ang makikita natin:

See the Pen Paragraphs with tags by Francis Rubio (@maniczirconium) on CodePen.

Gaya ng makikita, magkahiwalay na ang dalawang paragraphs. May blangkong line na sa pagitan nila. Dahil ito sa <p></p> tags na inilagay natin. Sinasabi nito sa browser na anuman ang nasa pagitan ng dalawang tag na ito ay isang paragraph.

Mga Headline

Ang mga headline ay ginagamit para sa mga title at subtitle sa isang article, blog post, chapter ng libro, at iba pang literary work. Sa HTML, mayroon tayong anim na headline tags. Ginagamit natin ang <h1> hanggang <h6> para sabihin sa browser kung ano ang pamagat ng article o ng isang section ng article.

Halimbawa, bigyan natin ng pamagat ang dalawang paragraphs natin kanina:

<h1>Ito ang title ng article na ito</h1>

<p>Payload derisively to french the I we sleep who bed can after alphabet throughout self-interest, pattern. Impatient good and play tones. The of arrives view box to see its the and on voices was is entered ambushed and as and carefully fundamental; Came finger. Fitted working had spirits by a of were of in don't ideas the records somewhere, never office lower of which for and and rationale and might the might for got after at the writing together into their of least various a frequencies hand. On the which people now son, multi forest longer of nor poetic he.</p>

<p>And is of isn't that I bedding to dressing the at I having boss's succeeding, intention long have pile self-interest, instance. Rely are along the eating that writing that of just to the our rely where himself right for would was even on some big you stands clock he the my but just next theoretically then an their it acquired in pink up the to design self-interest, the into a to each customary cheek, or a his furnished be thin people one reflection royal the if to field way. And tones point to be it be right the area the.</p>

Tingnan natin sa browser ang result nito:

See the Pen H1 as title by Francis Rubio (@maniczirconium) on CodePen.

Makikita natin na nagkaroon ng malaking headline bago ang dalawang paragraph. Dahil ito sa <h1></h1> tags na inilagay natin. Sinasabi nito sa browser na ang text na ito ay title ng buong webpage.

Note May debate pa kung ilang <h1></h1> ang dapat gamitin sa isang webpage. Pero marami sa mga experts sa Web development ang nagsasabi na dapat isa lang ang <h1></h1> sa bawat webpage. At dapat ang laman nito ay ang pamagat ng buong webpage.

Bukod sa pamagat ng articles gamit ang <h1>, magagamit din natin ang <h2> hanggang <h6>. Ginagamit ito sa mga sections ng webpage o articles. Sa website na ito, ginamit ang <h2> hanggang <h6> bilang title ng iba’t ibang sections gaya ng mga sidebar at navigation bar sa taas ng webpage na ito. Ginamit din ito sa mga subheadings sa article na ito.

Narito ang hitsura ng <h1> hanggang <h6> sa browser. Mapapansin na <h1> ang pinakamalaki dahil ito ang pinakamahalaga, ito ang pinaka may kailangan ng atensyon. Samantala, <h6> naman ang pinakamaliit.

See the Pen HTML Headings by Francis Rubio (@maniczirconium) on CodePen.

Note Magandang practice kung hindi ka lalaktaw ng heading sa HTML. Halmbawa, kung gagamit ka ng <h2> at magkakaroon ka ng kasunod na subheading, hindi ka puwedeng lumaktaw at gamitin ang <h4>. Mas maganda kung ang next mong gagamitin ay <h3> Hindi naman ito isang solid na rule kundi isang good practice.

Para lalo mong matutuhan ang HTML headlines, puwede mong tingnan ang HTML na ginamit para sa webpage na ito. I-right click ang page na ito at i-click ang View source o View page source.

Task: Webpage Article

Para lalo kang matuto, gamitin ang sumusunod na article na ito mula sa Wikipedia at gawin itong webpage:

Para sa contents nito, puwede mong i-copy paste ito mula sa gist na ito:

Puwede mo ring i-share ang screenshot ng gawa mo sa Twitter at Facebook! Gamitin ang hashtags na #100DaysOfCode, #AntaresProgramming, #HTML, at #WebDevelopment para makita namin at ng iba pang developers ang progress mo.

Summary

Para makagawa ng mga paragraph, ginagamit natin ang <p></p> tags. Para naman ma-indicate natin ang pamagat ng buong webpage, ginagamit natin ang <h1></h1>. Para sa mga subheading, ginagamit natin ang <h2></h2> hanggang <h6></h6>.