web-html_css_js.md


        
                Markdown 9.96 KB
                                    
                        | None                    
                
                                        |
    0    0                            

            
                                    raw
                    download
                    clone
                    embed
                    print
                
                                    report
                
                
            The Web is not the Internet. The Internet is a physical network of computers, initially developed for military reasons by the US in the late 60s. The Web came much later, in the early 90s, and is one of many applications of the Internet that provides and share content on the network. It simply consists of a protocol with which clients (browsers) can ask for resources stored into designated servers (websites).
While at its basics a website could consists of simple text files, modern complex websites typically use at least the following programming languages:

HTML: structure, metadata, content
CSS: style: typography, colours, background, images, layout, responsiveness
JAVASCRIPT: interactivity, client side script
PHP (or ASP, Perl, Python, Ruby): dynamics, database integration, server side script

Likewise, you can use a simple text editor to write down the code needed to support the website, but it's much more productive and enjoyable to use a dedicated tool, like the free, open-source editor called Brackets.

HTML
HTML stands for HyperText Markup Language. The basics of HTML all revolves around the concept of tag, keywords used to identify content on the page. Most HTML pages are content of some kind that is marked up using HTML tags, defining how the client should format and display the content it includes, or it points to. 
The tags are HTML keywords, called elements, wrapped up into a less-than sign on the left and a greater-than sign on the right. Most tags support some type of content, and so need a closing tag which is that "less-than, slash, element, greater-than". Besides these container tags, there are empty tags, that have no content, so don't need a closing tag.
Inside the opening tag, there often are attributes, name:"value" pairs, that better qualifies the action of the tag itself. There are global attributes that are shared by most or evene all tags, while some are specific" to one or a few tags only. Moreover, tags could be only informative, or functional*.
Tags can be nested inside each other, but they can not overlap. 
HTML is white space insensitive, every space one are completely ignored.
Neither the names of the files, nor the names of any of the folders within a website can contain spaces. The first letter of a file or folder name must be either a letter or an underscore character. Subsequent characters can be letters, underscores, numbers, or dashes. So if your file or folder name needs to be more than one word, you either need to squish it together as a single word, or separate the words with underscores or dashes. Your home page, the page that you want to show when a user first visits your site, must be saved as "index.html"
There are four special tags that are always needed, and in a predefined order, to form the basic structure for every HTML file: 

<html> defines the document as a web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the html tags.
<head> defines the header, that contains mostly metadata, information about the document that will not appear on the actual page, such as the title of the document, the author, the character encoding, which stylesheets or scripts to use.
<title> the text that will appear in the title bar of the web browser. The title must appear between the head tags.
<body> includes all the visible content on the page. 

There are two main types of content models, that help user agents know what type of content to expect within an element. The first, designed prior to HTML5, consists only of the following two levels:

block elements take up their own line within the flow of the document, so they stack one on top of each other
inline elements appear within the flow of other content.

The increased emphasis on semantics and structure in HTML5 has actually led to the expansion of content models into seven main models, help authors create more sophisticated document structures and to write more meaningful code:
flow: 
metadata: content that's defined as setting up the presentation or the behavior of the rest of the content. You're going to primarily find these elements in the head of the document. And it's going to contain things like metatags, no-script tags, script tags, style tags, the title tag of pages
embedded: any content that imports other resources into the document, like canvas and iFrame, object SVG, video, the embed tag.
interactive: any content that's specifically intended for some type of user interaction, like the anchor or link tag that people would click on, or the button and any form control if the user can interact with. There are also audio and video if they had some controls enabled. 
heading: defines the header of sections, which can be either explicitly marked up with sectioning elements or it can be applied by the heading content itself. It only includes the heading tags.
phrasing: the text of the document, as well as any elements that are used to mark up text within paragraph level structures. So in a lot of ways, phrasing content is really the same as what used to be inline level elements from the HTML4 specifications.
sectioning:

It's worth noting that these new models haven't done away with the previous concepts of block and inline level elements. They've just moved that functionality inside of these new content models, so that some of them behave as block level, while others can behave as inline level elements. 

Simple template:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="wahat's the page is about">
    <title> Title text </title>
    <link href="filename.css" rel="stylesheet">
    <style type="text/css">
        tagname {
        ...
        }
        #idname {
        ...
        }
        .classname {
        ...
        }
    </style>
    <script type="text/javascript">
    ...
    </script>
</head>
<body>

</body>
</html>
Main tags


<!-- text --> comment


<h1>, <h2>, <h3>, <h4>, <h5>, <h6> headings


<p> paragraph


<a> link to an external web page, a different file or anchor to an internal location

href='url|path/to/file.html|#anchor'
name='anchor'
target='_blank'


<img> insert image into a web page, not by embedding but by linking to them

src='url|path/to/file' (most used formats: jpg, gif, png, svg)
alt='text' text-based description for search engines and disabled people
border="n"


unordered list: ul surrounds the entire list, while li describe each item
<ul>
    <li> First element </li>
    <li> Second element </li>
    ...
</ul>


ordered list: ol surrounds the entire list, while li describe each item
<ol>
    <li> First element </li>
    <li> Second element </li>
    ...
</ol>


<em> emphasis (italics) see also <i>


<strong> strong (bold) see also <b>


<blockquote> quotation


<cite> citation


<code> programming code


<br/> line break


<hr/> horizontal rule


Tables

<table> 

<tr> define a row
<th> define a header cell
<td> define a cell
border = "n" for the size of the border line
<table>
<tr>
    <th>col 1</th>
    <th>col 2</th>
    <th> ... </th>
</tr>
<tr>
    <td>row 1, col 1</td>
    <td>row 2, col 1</td>
    <td> ... , col 1</td>
</tr>
<tr>
    <td>row 1, col 2</td>
    <td>row 2, col 2</td>
    <td> ... , col 2</td>
</tr>
<tr>
    <td>row 1, ...</td>
    <td>row 2, ...</td>
    <td> ... , ...</td>
</tr>
</table>


Structure tags
Adding these tags does not affect what the page looks like by themselves. Instead, they provide "hooks" for styling and designing the page.


<header>


<nav> navigation


<main>


<section>


<article>


<aside>


<footer>


<div> 


<span> inline block


Attributes

global attributes:

id='idname': specifies a unique name for an HTML element, the value must be unique within the HTML document, must contain at least one character, must not contain any space characters. The id attribute is most used by CSS to point to a style in a style sheet, and by JavaScript to manipulate the element via the HTML DOM. In CSS, an id is specified as #idname
class='classname': specifies one or more class names that can be used by CSS and JavaScript to perform certain tasks for ALL the elements with a specified class name. In CSS, a class is specified as .classname


Forms

form


Special Characters
All of these are added through what are called character entities. All character entities follow the same pattern. We have an ampersand, followed by some kind of special code, usually the name of the character or an abbreviation of the name, and then followed by a semi-colon.

There are three categories of characters that we cannot simply type onto the page:

extra space: &nbsp not to be overused
characters that are used by HTML: &lt for <, &gt for >, &amp for & 
characters that are just simply not on most keyboard, like the copyright, the trademark, the registered trademark, any monetary symbol (other than the dollar sign), foreign characters. A complete list of these entities is found [here](https://dev.w3.org/html5/htm l-author/charref)

Frames

iframe

width='n'
height='n'
src='url'
frameborder='n'
allow='option(s)'


Resources

Mozilla Foundation Tutorial
generic Image placeholder generator
Lorem Ipsum Generator


CSS
The appearance of the content of any HTML tag in the web page could be modified using the attribute style="attribute:value". Even if this is a ..., and there is no harm in doing it ... on a basis, it's however not a good practice, as the style of the document should be managed in a general way using CSS.  

JAVASCRIPT