HTML: Difference between revisions

From Computer Science Wiki
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 13: Line 13:
Content gratefully used with permission  <ref>http://cs50.tv/2015/fall/#license,psets</ref>
Content gratefully used with permission  <ref>http://cs50.tv/2015/fall/#license,psets</ref>


== Do I understand this? ==
== HTML tags ==  
<html>
[[File:Html elements.png]]
<iframe src="https://moodle.computersciencewiki.org/mod/hvp/embed.php?id=62" width="826" height="262" frameborder="0" allowfullscreen="allowfullscreen" title="HTML Part 1"></iframe><script src="https://moodle.computersciencewiki.org/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>
</html>


For example, consider the following line of text:
<syntaxhighlight lang="html">
My cat is very grumpy
</syntaxhighlight>


== HTML Forms ==
If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph element:


HTML Forms are one of the main points of interaction between a user and a web site or application. They allow users to send data to the web site. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own.
<syntaxhighlight lang="html">
<p>My cat is very grumpy</p>
</syntaxhighlight>


An HTML Form is made of one or more widgets. Those widgets can be text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time those widgets are paired with a label that describes their purpose — properly implemented labels are able to clearly instruct both sighted and blind users on what to enter into a form input.
Note: Tags in HTML are case-insensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency, readability, and other reasons.


The main difference between a HTML form and a regular HTML document is that most of the time, the data collected by the form is sent to a web server. In that case, you need to set up a web server to receive and process the data. How to set up such a server is beyond the scope of this article, but if you want to know more, see Sending form data later in the module.<ref>https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form</ref>
HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.<ref>https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#inline_vs._block-level_elements_a_demonstration</ref>


[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input Click here the Mozilla documentation page with links to each input type]
== List of some HTML elements ==
 
You should be familiar with these tags.
 
* html - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
* head - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
* title - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
* link - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
* body - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
* h1 through h6 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
* p - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
* div - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
* ol - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
* li - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
*
* ul - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
* a - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
* br - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
* small - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
* span - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
* img -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img


== Helpful resources ==
== Helpful resources ==
Line 39: Line 63:


* [[HTTP, HTTPS, HTML, URL, XML, XSLT, CSS]]
* [[HTTP, HTTPS, HTML, URL, XML, XSLT, CSS]]
* [[HTML forms]]


== References ==  
== References ==  

Latest revision as of 20:12, 21 August 2022

HTML [1]

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages.

HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.[2]

Introduction[edit]

Content gratefully used with permission [3]

HTML tags[edit]

Html elements.png

For example, consider the following line of text: 

My cat is very grumpy

If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph element: 

<p>My cat is very grumpy</p>

Note: Tags in HTML are case-insensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency, readability, and other reasons.

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.[4]

List of some HTML elements[edit]

You should be familiar with these tags.

Helpful resources[edit]

See also[edit]

References[edit]

  1. ↑ https://www.flaticon.com/
  2. ↑ https://en.wikipedia.org/wiki/HTML
  3. ↑ http://cs50.tv/2015/fall/#license,psets
  4. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#inline_vs._block-level_elements_a_demonstration

Give a sequence of brief answers with no explanation.

Retrieved from "https://computersciencewiki.org/index.php?title=HTML&oldid=11654"