Posts

Showing posts from November, 2022

HTML: index.html

<body> <h1> The Brown Bear </h1> <div id = "introduction" > <h2> About Brown Bears </h2> <p> The brown bear ( <em> Ursus arctos </em> ) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong> Least Concern </strong> . <br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear. </p> <h3> Species </h3> <ul> <li> Arctos </li> <li> Collarus </li> <li> Horribilis </li> <li> Nelsoni (extinct) </li> </ul> <h3> Features </h3> <p> Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 fee...
Post a Comment
Read more

Introduction to HTML REVIEW

  INTRODUCTION TO HTML Review Congratulations on completing the first lesson of HTML! You are well on your way to becoming a skilled web developer. Let’s review what you’ve learned so far: HTML  stands for  H yper T ext  M arkup  L anguage and is used to create the structure and content of a webpage. Most HTML elements contain opening and closing tags with raw text or other HTML tags between them. HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element. Any visible content should be placed within the opening and closing  <body>  tags. Headings and sub-headings,  <h1>  to  <h6>  tags, are used to provide titles for sections of content. <p> ,  <span>  and  <div>  tags specify text or blocks. The  <em>  and  <strong>  tags are used to emphasize text. Line breaks are created with the  ...
Post a Comment
Read more

HTML : Videos( video tag)

  INTRODUCTION TO HTML Videos In addition to images, HTML also supports displaying  videos . Like the  <img>  element, the  <video>  element requires a  src  attribute with a link to the video source. Unlike the  <img>  element however, the  <video>  element requires an opening and a closing tag. <video src = "myVideo.mp4" width = "320" height = "240" controls >   Video not supported </video> In this example, the video source ( src ) is  "myVideo.mp4" . The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage. After the  src  attribute, the  width  and  height  attributes are used to set the size of the video displayed in the browser. The  controls  attribute instructs the browser to include basic video controls such as pausing and playing. The text,  Vid...
Post a Comment
Read more

HTML : Image Alts

  INTRODUCTION TO HTML Image Alts Part of being an exceptional web developer is making your site accessible to users of all backgrounds. In order to make the Web more inclusive, we need to consider what happens when assistive technologies such as screen readers come across image tags. The  alt  attribute, which means alternative text, brings meaning to the images on our sites. The  alt  attribute can be added to the image tag just like the  src  attribute. The value of  alt  should be a description of the image. <img src = "#" alt = "A field of yellow sunflowers" /> The  alt  attribute also serves the following purposes: If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the  alt  attribute. Visually impaired users often browse the web with the aid of screen read...
Post a Comment
Read more

HTML : Images ( img tag)

  INTRODUCTION TO HTML Images All of the elements you’ve learned about so far (headings, paragraphs, lists, and spans) share one thing in common: they’re composed entirely of text! What if you want to add content to your web page that isn’t composed of text, like  images ? The  <img>  tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the  <img>  tag is a  self-closing tag . Note that the end of the  <img>  tag has a forward slash  / . Self-closing tags may include or omit the final slash — both will render properly. <img src = "image-location.jpg" /> The  <img>  tag has a required  attribute  called  src . The  src  attribute must be set to the image’s  source , or the location of the image. In this case, the value of  src  must be the  uniform resource locator  (URL) of the image. A URL is the ...
Post a Comment
Read more

HTML : Ordered Lists

  INTRODUCTION TO HTML Ordered Lists Ordered lists  ( <ol> )  are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last. You can create the ordered list with the  <ol>  tag and then add individual list items to the list using  <li>  tags. <ol>    <li> Preheat the oven to 350 degrees. </li>    <li> Mix whole wheat flour, baking soda, and salt. </li>    <li> Cream the butter, sugar in separate bowl. </li>    <li> Add eggs and vanilla extract to bowl. </li> </ol> The output will look like this: Preheat the oven to 350 degrees. Mix whole wheat flour, baking soda, and salt. Cream the butter, sugar in separate bowl. Add eggs and vanilla extract to bowl. Question 1 Can we only display either numbers or bullet-point lists? Answer With a li...
Post a Comment
Read more

HTML : Unordered lists

  INTRODUCTION TO HTML Unordered Lists In addition to organizing text in paragraph form, you can also display content in an easy-to-read list. In HTML, you can use an  unordered list  tag ( <ul> ) to create a list of items in no particular order. An unordered list outlines individual  list items  with a bullet point. The  <ul>  element  should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the  <li>  tag. The  <li>  or list item tag is used to describe an item in a list. <ul>    <li> Limes </li>    <li> Tortillas </li>    <li> Chicken </li> </ul> In the example above, the list was created using the  <ul>  tag and all individual list items were added using  <li>  tags. The output will look l...
Post a Comment
Read more

HTML : Line Breaks ( br tag)

  INTRODUCTION TO HTML Line Breaks The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s  line break  element:  <br> . The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser. <p> The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles). </p> The code in the example above will result in an output that looks like the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
Post a Comment
Read more

HTML: Styling Text (em tag and strong tag)

  INTRODUCTION TO HTML Styling Text You can also style text using HTML tags. The  <em>  tag emphasizes text, while the  <strong>  tag highlights important text. Later, when you begin to style websites, you will decide how you want browsers to display content within  <em>  and  <strong>  tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways: The  <em>  tag will generally render as  italic  emphasis. The  <strong>  will generally render as  bold  emphasis. Take a look at each style in action: <p><strong> The Nile River </strong> is the <em> longest </em> river in the world, measuring over 6,850 kilomete rs long (approximately 4,260 miles). </p> In this example, the  <strong>  and  <em>  tags are used to emphasize the text to produce the followin...
Post a Comment
Read more

HTML: Displaying text( p tag and span tag)

  INTRODUCTION TO HTML Displaying Text If you want to display text in HTML, you can use a  paragraph  or  span : Paragraphs  ( <p> ) contain a block of plain text. <span>  contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content. Take a look at each of these elements in action below: <div>    <h1> Technology </h1> </div> <div>    <p><span> Self-driving cars </span> are anticipated to replace up to 2 million jobs o ver the next two decades. </p> </div> In the example above, there are two different  <div> . The second  <div>  contains a  <p>  with  <span>Self-driving cars</span> . This  <span>  element separates “Self-driving cars” from the rest of the text in the paragraph. It’s best to use a  <span...
Post a Comment
Read more