[HTML 2/2] Wrap it UP !

-

 In the last chapter, we learned how to create the website with HTML

We're going to learn more details here, 


1. Create an unordered List

HTML has a special element for creating unordered lists, or bullet point style lists.. 


open and close <ul> </ul>, nested <li></li>

 <ul> 

    <li>Rabbits</li>

    <li>Birds</li>

    <li>Frogs</li>

</ul>





2. Ordered List

For creating ordered lists, or numbered lists.

<ol></ol>

Let's make 

<ol>

    <li>No limbs</li>

    <li>No moveable eyelids</li>

    <li>No ear openings</li>

</ol>


You can see the ordered lists.



3. Create a Text Field

Input elements are a convenient way to get input from your user. 

<input type="text">


4. Add placeholder text to a Text Field

Placeholder text is what is displayed in your input element before your user has inputted anything.

<input type="text" placeholder="Type here">

Note: Input elements are self-closing.



5. Create a Form Element

You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action attribute on your form element.

<form action ="url(where you want to submit the form data)">

    <input>

</form>


6. Add a Submit Button

You can create "Submit" button 

<button type="submit"> name of the submit</button>


Note: All Input is inside of form


example 

"<form action ="url">


  <input type="text" placeholder="Type here">

  <button type="submit"> Submit</button>

  

</form> 


7.  USE HTML to require a Field

you can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.

<input type="text required>


8. Create a set of Radio Buttons 

You can use radio buttons for questions where you want the user to only give you one answer out of multiple options. 


Radio buttons are a type of input;

Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.


<label>

    <input type="radio" name="indoor-outdoor">Indoor

</label>


It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and related input element.

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

we can also nest the input element within the label tags; 

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

I added this; 

<form action ="url">

      <input type="text" required placeholder="Type here">

      <button type="submit"> Submit</button>


    <label for="indoor"> 

      <input id="indoor" type="radio" name="indoor-outdoor">Indoor 

    </label>


    <label for="outdoor"> 

      <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor

    </label>

</form>




9. Create a Set of Checkboxes 

Forms commonly use checkboxes for questions that may have more than one answer.

Checkboxes are a type of input.

Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.

All related checkbox inputs should have the same name attribute.

It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.

Here's an example of a checkbox:
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>


10. Use the value attribute with Radio Buttons and Checkboxes

When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type radio and checkbox report their values from the value attribute.


For example:

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>


Here, you have two radio inputs. When the user submits the form with the indoor option selected, the form data will include the line: indoor-outdoor=indoor. This is from the name and value attributes of the "indoor" input.


If you omit the value attribute, the submitted form data uses the default value, which is on. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be indoor-outdoor=on, which is not useful. So the value attribute needs to be set to something to identify the option.


I made this labels.

<form action ="url">


  <input type="text" required placeholder="Type here">

  <button type="submit"> Submit</button>


<label for="indoor"> 

  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 

</label>


<label for="outdoor"> 

  <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor


<label for="fast"><input id="fast" type="checkbox" name="feeling"> Fast </label>

  <label for="cold"><input id="cold" type="checkbox" name="feeling"> Cold </label>

  <label for="scary"><input id="scary" type="checkbox" name="feeling"> Scary </label>

  

</label>

  

</form>



11. Check Radio Buttons and Checkboxes by Default

You can set a checkbox or radio button to be checked by default using the checked attribute.

To do this, just add the word checked to the inside of an input element. For example:

<input type="radio" name="test-name" checked>


12. Nest Many Elements within a Single div Element

The div element, also known as a division element, is a general purpose container for other elements.

The div element is probably the most commonly used HTML element of all.

Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.


13. Declare the Doctype of an HTML Document

The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.


At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.


You tell the browser this information by adding the <!DOCTYPE ...> tag on the first line, where the ... part is the version of HTML. For HTML5, you use <!DOCTYPE html>.


The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.


Next, the rest of your HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.


Here's an example of the page structure. Your HTML code would go in the space between the two html tags.

<!DOCTYPE html>
<html>

</html>


14. Define the Head and Body of an HTML Document

You can add another level of organization in your HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.


Metadata elements, such as link, meta, title, and style, typically go inside the head element.


Here's an example of a page's layout:

<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>



Here's the final link where you can access the webpage 


https://HTML-practice.jhc6.repl.co


Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt 는  그 값의 아래는 전부 불러옴. 예를들어 Banana를 입력했을 깨 500과 그 아래 값들도 모두 불러옴. 때문에 break 를 써줘야함 default는 해당하지 않는 값을 입력했을 때 ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more