HTML Introduction Part 3 : Tags Continued

-

Transcription/प्रतिलिपि
In last session we learned about, Paragraph Tag to set paragraph. Line Break Tag for new line. body tag with attributes to set Background image, Bgcolor for background color and, Text. Color Tag for setting color of the text to be displayed. For formatting of texts, we discussed Heading Tags for headlines, Font for setting font face, size and color. Plus, we can also make text bold, italic, and underline with respective texts.

Let’s understand few newer tags, and associated attributes to make are HTML page more attractive. All the HTML pages shown in this session has code in the description for you to try. For this, open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click to view the HTML.


We learned few of the attributes of body tag in last session. with Left, and top margin Attribute. we can set margin or spacing from the top or left in HTML document. The values can be given in pixels or percentage.
Paragraph tag is used to align text, in paragraphs. These paragraphs, can also be aligned in different alignment like, left, center, right, and justify, with align attribute.
where left attribute will Left-align text, right will Right-align text, center will Center-align text, and justify Stretches the lines so that each line has equal width like newspaper column

For Example -
Text to be displayed

html has provision to show number of items in list format, in two ways,
first an ordered list. An ordered list starts with the OL tag. Each list item starts with the LI tag. The list items will be marked with numbers by default. which we can change with type attribute. Type attribute has 5 options 1, A uppercase, a lowercase, roman 1 uppercase, roman 1 lowercase
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
unordered list. An unordered list starts with the UL tag. Each list item starts with the LI tag. The list items will be marked with bullets (small black circles) by default. However, like ordered list bullets of unordered list can also be modified with the style attribute to disk, circle, square or none.

disc, Sets the list item marker to a bullet (default).
circle, Sets the list item marker to a circle.
square, Sets the list item marker to a square.
none, the list items will not be marked.

horizontal lines or horizontal rule tag, is used to separate content (or define a change) in an HTML page. horizontal lines have 4 attributes to set the alignment, shade, size, and width of it.


marquee tag element is used to create a scrolling text, or an image. Scrolling can be shown horizontally, or vertically. marquee tag has number of attributes to define its behavior
Well Done! You have covered some more tags of HTML. To find out more visit links in the description.

Which topic you want us to cover next. Share your thoughts in the comment section.
Like and subscribe for more videos.


Source: https://www.w3schools.com/tags/
http://www.w3docs.com/learn-html/html-marquee-tag.html


Code:
------------------------------------


HTML Introduction - Part 3


Before Applying left and top margin


Notice the text is not spaced from top and left of the page.


------------------------------------


HTML Introduction - Part 3



After Applying left and top margin


Notice the text is spaced from top and left of the page.


------------------------------------


HTML Introduction - Part 3



After left alignment in paragraph



Notice the text is in the left of the page.


After center alignment in paragraph



Notice the text is in the center of the page.


After right alignment in paragraph



Notice the text is in the right of the page.


After justify alignment in paragraph



Notice the text is justified like newspaper, with text evenly distributed.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



------------------------------------


HTML Introduction - Part 3



Ordered List Type as 1, List will be 1,2,3,4






  • Item 1



  • Item 2



  • Item 3



  • Item 4



    • Ordered List Type as A, List will be A,B,C,D






  • Item 1



  • Item 2



  • Item 3



  • Item 4



    • Ordered List Type as a, List will be a,b,c,d






  • Item 1



  • Item 2



  • Item 3



  • Item 4



    • Ordered List Type as I, List will be I,II,III,IV






  • Item 1



  • Item 2



  • Item 3



  • Item 4



    • Ordered List Type as i, List will be i,ii,iii,iv






    1. Item 1



    2. Item 2



    3. Item 3



    4. Item 4




      5. ------------------------------------


      HTML Introduction - Part 3



      Un-Ordered List Type as disk






    5. Item 1



    6. Item 2



    7. Item 3



    8. Item 4



      9. Un-Ordered List Type as Circle






    9. Item 1



    10. Item 2



    11. Item 3



    12. Item 4



      13. Un-Ordered List Type as Square






    13. Item 1



    14. Item 2



    15. Item 3



    16. Item 4



      17. Un-Ordered List Type as None






    17. Item 1



    18. Item 2



    19. Item 3



    20. Item 4




      21. ------------------------------------


      HTML Introduction - Part 3



      Horizontal Rule Left





      Horizontal Rule Center





      Horizontal Rule Right





      Horizontal Rule No Shading





      Horizontal Rule Size





      Horizontal Rule Width






      ------------------------------------


      HTML Introduction - Part 3


      This is a scrolling marquee text.
      This is a sliding  marquee text.
      This is an alertnate marquee text.
      This is an up marquee text.
      This is a down marquee text.
      This is a right marquee text.
      This is a left marquee text.
      This marquee text has 50 pixels height.
      This marquee text has 50 pixels horizontal space.
      This marquee text loop 2 times.
      This marquee text has scroll amount to 20.
      This marquee text has delay of 3 seconds.
      This marquee text has true speed of 3 seconds.
      This marquee text has vertical space of 50 pixels.
      This marquee text has width of 100 pixels.



      ------------------------------------


      Comments

      Post a Comment

      Popular posts from this blog

      Tenalirama: Man who bring kingdom to its knees with rice and chessboard !

      -
      Image
      Witty Wednesday What is interesting fact that you can come up with seemingly mundane everyday rice and game of strategy, chess.  Let me tell you this in a story. The story of a man who bring whole kingdom down on its knees, single handedly with these two things. This is one of the famous story of TenaliRama. I was watching one TV serial the other day named “TenaliRama". TenaliRama was the real person who was famous for his wits and who is protagonist in this serial. "Tenali Ramakrishna who was known as Vikatakavi (clown jester poet), was a Telugu poet who hailed from the present-day Andhra Pradesh region, generally known for his wit and humor. He was one of the Ashtadiggajas or the eight poets at the court of Krishnadevaraya, the Vijayanagar emperor. (1509–1530). Tenali Ramakrishna composed works on Hinduism. Tenali Ramakrishna was also a great scholar of several languages that included Marathi, Tamil, and Kannada."- Wikipedia As the ...
      Click for more »

      DFC_DOCBROKER_EXCLUDED: Primary Docbroker Blacklisted

      -
      Problem & Cause Have you ever come across the error in the log java.io.IOException: DFC_DOCBROKER_EXCLUDED. This means that somehow, your DFC is not able to communicate with your docbroker, specified in dfc.properties. Your docbroker is responsible for communication between the application deployed on the application server, and the docbase. Docbroker acts like a bridge between the two layers of architecture. But, due to some reason, this bridge is broken. There can be multiple reasons behind it. 1. Bad connection or Network failure 2. Docbroker does not start properly 3. Docbroker is not properly added in dfc.properties 4. Patch applied for DFC doesn't get deployed properly 5. Web application doesn't start properly 6. DNS entry not resolved for the docbroker server 7. Any other unidentified reason. How does it work? The DFC of application maintains the list of docbrokers, which it can communicate. However, if it is not able to communicate with...
      Click for more »

      Enabling Mouse Cursor Recording In OBS

      -
      Image
      Transcription/प्रतिलिपि If your mouse cursor or pointer is not displayed on OBS recordings. There might be couple of settings that can work. Step 1. Open File Menu in OBS Step 2. Select Settings Step 3. Select General Tab from Left panel Step 4. Disable setting Hide cursor over projectors  Step 5. Right click on the source your wanted to capture Step 6. Open Properties and enable capture cursor checkbox Step 7. Click Ok Step 8. Verify your setting by recording a video Well done! you have successfully captured cursor over the recording in OBS
      Click for more »