Category Archives: Programming

Programming is the process of designing, coding, debugging and maintaining the source code of programs

Html, Programming language, Programming, Web Page

Header of an Html page

Header of an Html page

The header is delimited by the element head (which in turn is contained within the element html), which describes document information (title, configuration, scripts, and styles)

Document information is placed, which will not be displayed on the main screen and can be:

  • Title of the document
  • Metadata
  • Links to other files
  • Scripts
  • Styles

Title of the document

The title should be brief and descriptive of your content, as it will be what others see when they add our page to their bookmark

This tag is mandatory and must appear only once in our document

The browser will be displayed in the title bar of your window

Metadata

The metadata elements are entered with the label goal, the type of method is defined by its attributes, some of the most common are:

  • charset

    indicates the encoding in which the document is written

    It is important that you enter the correct encoding for the browser to display the document correctly

    In this example we have used the coding UTF-8 that is the standard for internet

  • author

    indicates who is the author of the page, specified with the attributes name and content

  • keywords and description

    Both make reference to the content of the page and are often used by search engines to index the web pages

    Thanks to these fields, which are specified with the attributes name and content, search engines know that search terms best describe our website to show it to other users

Links to other files

In the header we can indicate links to other files that we want to upload along with our website, for this we use the label link

They will usually be CSS style sheets, JavaScript files, additional libraries in other languages or our own files

The example included the CSS style sheet of the wordpress twentyfourteen theme, for this the attributes have been used:

  • rel

    to indicate what type of document is, in this case, a style sheet

  • id

    to assign a unique identifier

  • type

    to indicate the type of text that the browser will receive, in this case a CSS style sheet

  • href

    is the relative path to the document or its absolute path

The example also included a specification for defining multiple languages, which the browser will use to index using the language in which the page is written correctly, for this the attributes have been used:

  • rel

    to indicate what type of document is, in this case, a multisite reference in multiple languages

  • hreflang

    to assign you a language, in this case es for Spanish, en for English and x-default for the default language for the start page

  • href

    is the relative path of the document or its absolute path, in this case the lang parameter is added, starting with ? to indicate the acronym for the language

Scripts

The item script allows you to include executable code in our web page

By default, the browser will take JavaScript as the default language to run, if we don't specify another

The example has taken into account the case that the browser cannot use scripts, either because it is old or that the user has blocked it in its settings

To do this we have used the item noscript, which in this case will display the text in the browser instead of running the script

The example used an external file to include the executable code, using the absolute or relative path in the attribute src

Many web pages do not include scripts in the head, but in the body

The reason for speeding up the loading of HTML, because when you find an external file you have to read and run it, stopping the process of loading the rest of the HTML

Let's imagine that we have the server saturated by the loading of the scripts, the user would not receive anything from the HTML and therefore you would not see the page, just a blank page

For this reason, some developers include the scripts at the end of the document, at the end of the body element

As scripts typically handle interaction with the user, it's not too serious that there's a small delay in starting to see animations, submit forms, etc.

It is easier for the users if you can see the content and then you can interact with it

Styles

The item style allows you to define properties for styles that will apply throughout the document

As you can see in the example, this element usually indicates what you expect to apply, although you can also embed them within the HTML itself

It is also possible to use an external style sheet, in this case we have used the CSS of the twentyfourteen wordpress theme, specifying the relative or absolute path of the file, in the attribute href

Html, Programming language, Programming, Web Page

Body of an Html page

Body of an Html page

The body of an HTML page includes the content of the web page itself and is defined with the element body

There are a lot of tags that we can use in the body, as a query we can use this listing full

Let's group some of your tags by:

  • Structure of the document

    header, section, navigation

  • The structure of the text

    titles, pararaphos, ...

  • Characterization of the text

    emphasized text, code snippets, ...

Structure of the document

Normally every web page has a title header, some kind of navigation sidebar, a main content and maybe a footer

To achieve this structuring is you can use the item div by divisions

A split cannot be inserted within a lower-level label, such as text structuring and characterization, but it can be inserted within another div element

Thanks to the style sheet, and generic attributes id and class give format to these groupings

The structure of the web sample is fairly standard and the divisions that we see repeated constantly

This is why from HTML5 were added to a series of divisions with meaning to be able to tell more easily how we structure the web

Elements of semantic structure

These elements are analogous to divisions, but they also have associated a meaning related to the structure

In the example we can see that we have been able to replace some divisions by a label equivalent

Some of the most important semantic structuring labels are:

In the example we can see that we have been able to replace some divisions by a label equivalent

Some of the most important semantic structuring labels are:

  • header

    represents the header of a document or section

    To be used to contain introductory information

    There may be more than one in the document

  • footer

    it represents the closure of a document or section

    It usually contains information about the author, copyright, terms of use, contact information, etc

  • nav

    represents the section that contains the navigation links for the web site

  • section

    defines a section of the document

  • article

    represents a content-independent and self-contained

    For example blog posts, news, comments, etc

  • aside

    defines content that is located outside of the place in which it is contained

    As for example a sidebar

    It is usually related to the element that contains

  • figure

    define an independent element such as an image, a code snippet, a diagram, etc

    It is usually related to the element it contains, but its position is independent of the same

  • figcaption

    is the title or reading of an element figure

    It is usually put as the first or last element of the same

  • details

    represents a series of additional details that the user can hide

Elements of structure of a text

The tags structure of a text serve to define the headings of the sections and paragraphs

Among the block labels we highlight the following:

  • p

    contains the text of a paragraph

    The browser does not display the white spaces or extra line breaks to write within the paragraph

  • hN

    defines section headings (there are 6 levels, where N is 1 to 6)

    Can be configured how you see the headers through CSS

    Normally a higher source is used the higher the level, with h1 being the highest level

    Changing the number you can get different visual effects by changing the size of the letter

    These elements are used to structure the document in sections, subsections, etc

  • pre

    contains a paragraph with preformatted text, that is, it will appear as if it had been written with a typewriter, with a fixed spacing font (Courier)

    Takes into account the white spaces and extra line breaks

    It may be useful to write paragraphs with examples of source code

    In the example we simulated a table, although for that task it is advisable to better use the label for tables

    Other types of elements can be simulated, as text will be taken literally, but it is advisable to use their specific tags, as long as they exist

    With what we will get:

    Text
     Tabbed text

Simulation table

column1    column2    column3   column4
row11      row12      row13     row14
row21      row22      row23     row24

  • blockquote

    is used to include quotations, which may contain multiple paragraphs or other elements

    Generates left and right margins, although it is recommended to define the desired format using a style sheet

    In the example you have used the attribute cite to indicate the origin of the quotation, in this case the novel by Don Quixote de la Mancha, since we have quoted a paragraph of the beginning of the novel

    With what we will get:

    In a place of the stain of whose name does not want to remember me…

  • tt

    we get the text to have a smaller size and the appearance of the characters of a typewriter

    It does not preformat the text, but only changes its appearance

    In the example you have written a paragraph, and we have given the appearance of the characters of a typewriter

    With what we will get:
    Sometimes... I see dead

Elements of characterization from the text

It is generally used within paragraphs

They serve to define the format of the text, although thanks to the style sheets, fewer and fewer

They are maintained for compatibility with older versions of HTML, among the most important ones we highlight:

  • br

    adds a line break without a change of paragraph

    Has No closing tag

    In the example you have written a paragraph, and within the same we have used the line break

    With what we will get:

    Sometimes…
    I see dead

  • nbsp

    it's not a label, but rather a way to add additional blanks for the browser to recognize

    If we want to force him to do it, we have to put the code nbsp (non-breaking space)

    In the example a paragraph has been written and within it we have added a blank space, but we have forced the appearance of another additional

    With what we will get:

    Sometimes… I see dead

  • center

    allows you to center an element, whether it's a paragraph, text, image, etc

    Some older browsers did not support it, although little is currently used as many elements include a similar attribute that replaces it

    Another cause of its disuse is because it is possible to simulate it using style sheets

    In the example you have written a paragraph, and we forced her focused

    With what we will get:

    Sometimes… I see dead

  • hr

    you get a horizontal stripe as wide as the screen, and with the appearance of being embedded on the background

    Has No closing tag

    In the example a paragraph has been written and we have added a horizontal stripe to separate it to simulate that there are two paragraphs

    With what we will get:

    Sometimes… I see dead

    In a place of the stain of whose name does not want to remember me…

  • sup

    is to obtain a mathematical formula that includes an index

    In the example, a text has been written with a mathematical formula in which we have assigned the index 2

    With what we will get:
    m2

  • sub

    is to obtain a mathematical formula that includes a subscript

    In the example we have written a text with a mathematical formula in which we have assigned it subscript 2

    With what we will get:
    m2

  • italic

    puts the text in italics

    You can use the short form i, as it is equivalent

    In the example you have written a text in italics

    With what we will get:
    Sometimes… I see dead

  • em

    indicates that the text will be angry, usually the text is put in italics, although if we use a style sheet we can choose how it will be angry

    In the example you have written a text enfacitado

    With what we will get:
    Sometimes… I see dead

  • bold

    puts the text in bold

    You can use the short form b, as it is equivalent

    In the example you have written a text in bold

    With what we will get:
    Sometimes… I see dead

  • strong

    indicates that the text will be further angry, usually the text is put in bold, although if we use a style sheet we can choose how it will be angry

    In the example you have written a text with a greater emphasis

    With what we will get:
    Sometimes… I see dead

  • code

    embeds code in the middle of a paragraph in a similar way to pre, but without creating margins left and right

    The example has written a paragraph with the special character of white space, but when embedded as code, the page will display it literally

    With what we will get:

    Sometimes… I see dead

Html, Programming language, Programming, Web Page

Lists in Html

Lists in Html

We will often be interested in presenting things in the form of lists, as they allow us to make enumerations of elements, using a numbering or not, also create definitions of terms

You can choose from three different types:

  • Numbered lists

    serve to create a list with numbers

  • Bulleted lists

    serve to create a list with symbols or bullets, are not numbered

  • Lists of definitions

    are used to create term definitions, are not numbered, and can be used to simulate dictionaries

Numbered lists

Ordered lists are used to present things in a particular order

A correlative number for each item will automatically appear in the resulting list:

In the example you can see that the ordered list starts with the item ol included inside the list of elements li

You have used the attribute type to specify what type of numbering we want to use:

  • 1

    uses numeric values

  • to

    use lowercase letters

  • To

    use letters in uppercase

  • i

    uses roman numerals in lowercase

  • I

    uses roman numerals in uppercase

If not specified, the default is 1

You have used the attribute start to specify from which numbering begins, in this case it starts from the number 3

You have used the attribute value to specify a specific value for that element, in this case the number 8

In the example we can also see that lists with numbered can be nested

Remaining as a result:

  1. Mammals
  2. Fish
    1. Sardine
    2. Cod
  3. Birds

Bulleted lists

Unordered lists are used to present things that, because they do not have a particular order, do not need to be preceded by a number

The resulting list automatically displays the symbol or bullet chosen with the attribute:

In the example you can see that the ordered list starts with the item ul included inside the list of elements li

You have used the attribute type to specify what type of bullet we want to use:

  • circle

    use a circle

  • disc

    use a circle with the hollow interior

  • square

    use a square

If not specified, the default is circle

In the example we can also observe that bulleted lists can be nested and in addition we have used different types of bullets to distinguish between them

Remaining as a result:

  • Mammals
  • Fish
    • Sardine
    • Cod
  • Birds

Lists of definitions

Definition lists are appropriate for glossaries (or term definitions)

Thanks to this type of list, simple dictionaries can be built

In the example you can see that the list of definitions that begins with the element dl included inside the list of elements dt that represent the thing to define and the elements dd that represent the definition of the thing to define

The example has not been included, but we can also nest lists of definitions

Remaining as a result:

Sardine

Fish osteíctio of the order clupeiformes (Sardina pilchardus) in the Mediterranean sea and the Atlantic ocean

About 25 cm long, bluish green on the back, silvery on flanks and belly

Consumed fresh or canned

Cod

Marine fish osteíctio of the order gadiformes (Gadius callarias) which reaches over a meter in length
Html, Programming language, Web Page, Programming

Links

Links

The links or hyperlinks allow the user to browse non-sequentially, other external websites spread around the world through hypertext links or parts of the same website

For this we use the element to that is an anchor

In example it has been linked to the home page of this website where the attribute href is the destination of the link (it is advisable to use quotation marks (single or double) so that the browser understands that it is of text type) and the text within the element is the indicative text that will appear on the link screen (with a special color and generally underlined)

Remaining as a result:

Home page

Three types of links can be distinguished:

  • With absolute address
  • With relative address
    • Within the same page
    • Within our web
    • Outside of our website
  • E-mail

With absolute address

If we want to link to our page or a page that is outside of ours (i.e. it is on a server other than the one that we have hosted it)

You need to know your full address, or URL (Uniform Resource Locator)

The URL could be, in addition to the address of an Internet page, an ftp address, gopher or other internet service

The destination of the link will in these cases be the initial or default page of that web page, which will normally be by default index.html, index.htm, index.php or index.asp, will depend on the language used when writing the web page

For that reason, we will be able to skip that login page and it depends how your server is configured, you'll get the desired response or a type 404 error wrong direction

In the example it has been linked to the Microsoft home page by using the URL of a secure website HTTPS and you have used the attribute target with the value _blank to instruct the browser to open a new window with the linked page, so that we can see both pages without losing the content that we were previously viewing

It is very important to copy these addresses correctly (respecting the case, because the servers are able to distinguish them and may not recognize the address we have written, returning the aforementioned error 404 of incorrect address)

It has also been used for the attribute rel with the values noopener and noreferrer for that is not stored in the cache of the browser

Remaining as a result:

Microsoft Homepage

With relative address

We might have only one page. But most often we have several pages, one initial (or main) and others connected to it, among themselves or with other external ones that in turn are connected to themselves and other external ones

Within the same page

Sometimes, in the case of very large pages, we may be interested in leaping from one position to another

The destination of the link, in this case the site within the page where we want to jump, is replaced by a brand (the word mark can be any word we want, but preceded by the symbol #)

This word (or words, since we can use more than one separated with _) will appear on a colored screen (in the form of hypertext and if we use a CSS style sheet can be modified according to our needs)

In the example, a link has been created at the end of this same page, to which we can jump to the label that we have called end if you click on the link

For it to work properly, there must also be the final link, but the browser will ignore the link because it will not know where to jump

In the example we have the link that we will have to include, in the position that we want to be jump, the attribute has been used for this purpose name, with the chosen value but without using the symbol #

Remaining as a result:

Press to go to the end

Within our web

We can also go to another page of our website hosted in our server

In the example has been linked to the page within this website that talks about the lists, we have included in the attribute href relative direction and parameters, which are preceded by the symbol ? and have the format of variable='value' and if we have more than one, they separate with the symbol &

Remaining as a result:

Lists

The example has been linked to a specific place on the list page, specifically the one that talks about the bulleted list

To this end, the system brands explained above

Remaining as a result:

Bulleted lists

In the examples above we were assuming that the page on which we write the tag and the page to which you want to make the leap they were in the same directory

It may happen that we have organized the Web site with a main directory and subdirectories auxiliary hanging from the same

If the page to which I want to skip is in the subdirectory subdir, then in the href attribute we should have written /subdir/pagina.html, indicating the full path from the root directory to the page page.html

Conversely, if we want to jump from one page to another that is in a previous directory, in the href attribute we should have written ../page.html

In this case, the colons instruct the browser to go to the previous directory

You must use the symbol / to indicate the subdirectories if you are working with a Unix server, and the symbol \, if you are working with a Windows server, because the directory system is treated differently

If we want to avoid the complications of having both subdirectory, we can save everything in the root directory or in a single directory

However, this practice has the disadvantage that everything is more messy and if in the future we want to make modifications it is more complicated to find the contents, than if we had ordered it by specific subdirectories with a name that is descriptive about its content

Outside of our website

Is applied as explained above for the absolute addresses and within our web, but this time the links will not be hosted on our server, but on an external one

E-mail

If we want our users to get in touch with us, we can include our email address in a link

In the example has been included within the attribute href the reserved word mailto followed by a two point along with the email address of the administrator of this website

It has also been repeated within the tag so that the user knows that the link belongs to an email, so that it is easily recognized, although a descriptive message or the image of a mailbox (a metaphor that the user might relate to the email) could have been used, for example

Remaining as a result:

edrunner1@hotmail.com

By clicking the link we will see that the browser will try to open the program that has associated for the management of the mail, with the address of the recipient already filled in, which is the one that appeared in the link

We can also add other values that will be used by the email manager using reserved words that are preceded by the symbol ? and have the format of variable='value' and if we have more than one, they separate with the symbol &

Among the most outstanding we have:

  • subject

    is the recipient user of the mail, by default it will be Feedback

  • cc

    simulates a carbon copy used in case there is more than one recipient, we should indicate them here separating them with the symbol ;

    The recipients will be able to see who are the other recipients

  • bcc it's similar to copying in carbon copy

    In this case the copy is hidden and the recipients will not be able to see who are the other recipients

  • body

    it's the text of the email itself, the mail manager could ignore it or add something to it, such as a farewell message or a signature, so it won't always be the same as what we've written on the link

End

This is the end mark (it does not contain an actual link as it is a binding reference, but because it has text, it will be underlined as if it were) for the previous example of the system brands explained above

Html, Programming language, Programming, Web Page

Images in Html

Images in Html

Images on a web page are known as bitmaps and can represent icons, buttons, images with transparent areas, or photos

Depending on the level of compression used we will lose quality, so we must know how to choose the format that best suited to our needs:

  • png

    it is a lossless compression format that also supports transparency

    We can represent icons or images with transparent areas, so that is a good alternative for any type of image that is not a photograph

  • jpg or jpeg

    it is a format of compression with loss that does not supports transparency

    It is typically used for photographs

  • gif

    it's a lossless compression format, but it's limited to 256 colors

    It takes up very little space and is ideal for low-quality images, such as icons or buttons

    Supports transparencies and animations

As with HTML editing, we need an image editor for manipulation

There are commercial and very powerful editors like Photoshop, but we can also use editors with a similiar quality and open source like GIMP

We also have the possibility to use some tool that allows us to convert between the different formats, such as ImageMagick

The item to include images in our web page is img which must include at least the attribute src to which we will tell the browser, by means of the relative or absolute path, the name of the image and by its extension, the format of the same

In the example we can see that in addition to the attribute src we have used width that allows us to specify the width of the image

The attribute height that allows you to specify the height of the image

And the attribute alt entering a description (a word or a short sentence) about the image

In principle it can be omitted, but it is beneficial for those who access the page with a browser in the form of only text, since they will not be able to see the image, but at least they will be able to get an idea about it thanks to that description

Remaining as a result:

Secarcam's Computer Science Web

You can capture the images that the browser shows us, in order to save them permanently on your hard drive

From the browser, click on the image with the right mouse key, we will see a menu in which there is the possibility to save the image in the directory of the hard drive that we indicate

In the event that we do not want users to be able to save the images from our website we will need to use some technique to avoid the press of the right key of the mouse using Javascript

Image used as link

In some cases, an image is also used as a link to another page

With regard to the location of the image file, it is used just like a link. If nothing special is indicated, it means that the file is in the same directory as the HTML document we are writing

An image that is not on our system can be uploaded using the same method as the links, the full URL of the image is indicated on the label. Although this is not very advisable, as it would unnecessarily lengthen the loading time of our page

A very important aspect to consider is the size of the images, because a large image is a large file, and this can cause excessive loading time, with the consequent risk that anyone trying to load our page will get tired of waiting, and desist from it

The example has used a thumbnail (miniature reproduction of the image), which links to the image in its true size

This way we don't reload a page too much, and the user will be the one who decides which images they want to upload

Another way to achieve this is to reduce it with an image editor to 150×75, save it with another name, and then make the small one the link of the big

This would be a solution if we used a very old version of Netscape, as it did not recognize the width and height attributes

Remaining as a result:

In the example the image has been used to redirect us to the home page, so we can link the image to the desired page

We can also use icons, buttons or animations to perform this task

In the example we have also used the attribute border with the value 0 because sinó the image will be surrounded by a rectangle of the normal color of the links, in this way, we prevent that rectangle from appearing

Remaining as a result:

By hovering over this image, we check that it also acts as a link even if it lacks the colored rectangle. This may be more aesthetic, although there is a risk that the user will not realize that the image serves as a link

Position of the text relative to the image

To choose the position of the image relative to the text there are different possibilities

The simplest is to place it between two paragraphs, with the text on one side

Using CSS style sheets you can get more elaborate effects, such as animations, motion, rotations, etc

To choose the position of the text relative to the image using the attribute align and allowed the following possibilities:

  • top

    the text is top-aligned

  • middle

    the text appears aligned in the middle

  • bottom

    the text appears bottom-aligned

This attribute is no longer supported in HTML5 and the example has been included for backward compatibility, we recommend that you use a style sheet to get this effect or by using the element div

In the example we have opted to use the item div

Remaining as a result:

Top-aligned text
Text aligned in the middle
Bottom-aligned text
Html, Programming language, Web Page, Programming

Multimedia in HTML

Multimedia elements in HTML

The multimedia elements offered by HTML5 allow you to add audio and video to a website, and even access the camera of your PC or mobile devices to record videos or take pictures

For many years these elements were demanded by the developers, since it was only possible to play multimedia elements using plugins or addons that had to be previously installed in the browser

From the HTML5 standard were included the elements:

  • video

    embed a video in the web page

  • audio

    embed an audio clip into the web page

The only restriction is that we can only reference one file (for which we will use its attribute src)

But it allows you to include more than one encoding format (for which we will use elements source)

The inclusion of the elements source is due to the incompatibilities between the audio or video encoding formats supported by each browser, since due to the different licenses, there is still no clear standard for the internet

Currently, the most compatible audio formats for browsers are:

  • WAV

    also known as WAVE it is a digital audio format without data compression

    It was developed by Microsoft and IBM

  • OGG

    is the container used by lossy digital codecs:

    • Opus

      it is a format of open source

      Está estandarizado por el Internet Engineering Task Force (IETF)

    • Vorbis

      it is a format of open source

      It was developed by Xiph.org

  • MP3

    format of digital audio compression

    It was developed by Moving Picture Experts Group (MPEG)

  • AAC

    also known as Advanced Audio Coding is a codec digital with lost

    It follows the international standard ISO/IEC 13818-7 as an extension of the MPEG-2

    It is widely used in Apple devices

Mientras que para vídeo:

  • MP4

    MPEG 4 format files with H264 video codec and AAC audio codec

  • WebM

    files with the WebM format with the video codec VP8 and the audio codec Vorbis

  • Ogg

    files with the Ogg format with the video codec Theora and the audio codec Vorbis

Audio

The example referred to Amaral's song, Hacia lo salvaje, for this purpose four elements have been used source

He has indicated to the browser by using the attribute src where you can locate the file and its extension and with the attribute type he has indicated what type of file should play

The example only referenced WAV, OGG, MP3, and AAC types, but multiple files of the same type could be referenced but with different audio qualities

Within the element audio it has also included a text that will be used by default in the event that our browser does not support any of the audio types listed on the items source

In the example you have used the attribute controls, which is a generic attribute that you share with video

Among the most outstanding attributes for audio and video elements we have:

  • autoplay

    the playback starts at the same time of the loading of the page

  • controls

    are added to the playback controls so that the user can control it

  • loop

    the file plays continuously, i.e. when playback is over, it starts again from the beginning

Video

The example for the item video it is very similar to that seen previously for the item audio with the exception of including an element object

This element allows browsers that do not support HTML5 can play a file by using the flash plugin

This option can be useful with older browsers that still use earlier versions of HTML

Although Google has decided to remove flash support in its Chrome browser, to encourage the use of HTML5's new video capabilities

In Chrome you can only use flash on demand, explicitly indicating it in your settings and for web pages that the user allows

Html, Programming language, Programming, Web Page

Tables in Html

Tables in HTML

Tables allow you to represent tabular information, in rows and columns, with headers. Each item in the table can be simple, or a grouping of rows, columns, table headers and feet, subdivisions, multiple headers, and other complex elements

Because tables allow for very detailed control, they are sometimes used to organize the overall structure of a web page

This practice is not recommended, although it was widely used in design a few years ago

It is more advisable to use elements div for the general structure of the web page

A table is defined by the element table

The rows are defined with the element tr (table row)

For each row defines a cell of elements td (table data) to contain other elements, including other tables (although not recommended, as a visually confusing result can be obtained)

The example lists the natural numbers from 1 to 9, filled with the first row a description and the following with the data

Remaining as a result:

Number Ordinal
1 First
2 Second
3 Third
4 Fourth
5 Fifth
6 Sixth
7 Seventh
8 Eighth
9 Ninth

Spanning

Sometimes we will need to combine cells, this practice is called spanning

To group or merge cells in a particular row (they apply to items td), we'll use the attribute colspan asignandole as the value of the number of cells that will be used

In the example you have listed three languages, and to highlight the description has been applied spanning on the first row

Remaining as a result:

Languages
HTML5 CSS JavaScript

To group or merge rows from a particular column (they apply to items tr), we'll use the attribute rowspan assigning it as a value the number of rows to be used

The example has listed three languages and to highlight the description has been applied spanning on the first column, getting a table similar to that of the previous example but with the values placed in the second column

Remaining as a result:

Languages HTML5
CSS
JavaScript

Elements of a table

To add complexity to the table we can add more elements to it:

  • caption

    is the title or caption of the table

    Shown outside the table, by default above it

    It is usually put normally after the item table

  • thead

    serves as the head of the table

  • th

    are some cells for special use only within the table header

  • tbody

    it is usually used after the element thead to distinguish the header from the body of the table

  • tfoot

    serves as the foot of the table

    Interestingly, it must be defined before defining an element tbody

In the example all the elements that we have just defined have been applied, as can be seen there is not much difference with the first table that we have set as an example

However, now all its parts are better located and using CSS style sheets we can give it a more attractive look for the user

In the example only has a value more to the table that originally did not exist

Thanks to the element tfoot now we have the possibility to use JavaScript, add the result of calculations or totals of the values of the other cells

We can also observe that the cells within the element thead appear with a larger font size and bold, because they are part of the header

As at the beginning, thanks to the element caption, we have a brief description of our table

Remaining as a result:

Natural numbers 1 to 9
Number Ordinal
10 Tenth
1 First
2 Second
3 Third
4 Fourth
5 Fifth
6 Sixth
7 Seventh
8 Eighth
9 Ninth
Html, Programming language, Programming, Web Page

Form

Form

A form is required on any web page, as they allow the user to send data to the server

The most common example is the form of registration or login

The forms use the element form

Within this element will be the controls that make up the form, and will be of those controls which will extract the information that you will receive the server

At the time of defining a form we have to enter the URL which will receive the data and what type of HTTP method we want to use

We have the following attributes:

  • id

    it is a unique identifier, it is very useful to recognize the element from JavaScript or to process it from the server

  • name

    this will be the name of the data that will be sent with the HTTP request, can be accessed from JavaScript or from the URL indicated in the attribute action to receive the data on the server

  • action

    normally contains the URL of the application that will receive the response on the server

    For example a PHP script, although it could also be a JavaScript code file

  • method

    type of HTTP method to send the data to the server

    Maybe:

    • GET

      sends the information to the server as parameters within the URL specified in the attribute action

      These parameters will be visible in the navigation bar and it is only possible to send up to 500 bytes

      For security, it is not recommended to use this method, since the data sent is exposed in the navigation bar and someone outside the user, could manipulate them before being processed by the server

    • POST

      sends the information to the server in the same HTTP request

      You do not have the size limitation on the data sent

      Allows you to send attachments and the data sent are not visible in the browser bar

      It is recommended to use this method for security, as it makes it difficult for data manipulation before being processed by the server, although it is still possible

Input elements

The item input serves to create the vast majority of controls that can be used in a form

Depending on its attributes you can create buttons, checkboxes and even attach files

The vast majority of these controls are new thanks to the HTML5 standard such as controlling dates, colors, etc; and work through browser-specific dialog boxes

Because of this circumstance, they may differ from browser to browser or even unsupported if it is very old or does not support HTML5

It has general attributes that all elements input possess and specific attributes for each type of item

General attributes:

  • id

    it is a unique identifier, it is very useful to recognize the element from JavaScript or to process it from the server

  • name

    this will be the name of the data that will be sent with the HTTP request, can be accessed from JavaScript or from the URL indicated in the attribute action to receive the data on the server

  • type

    is the specific type of control, this attribute tells the browser what to paint on screen and what additional attributes it might contain

    So it's important that if you have specific attributes for that type, we choose them correctly or the browser will ignore them by not understanding them

  • form

    form identifier, binds the control to the form by the value of its attribute id

Specific attributes:

  • checked

    indicates that the control has been selected

    It is used only with the checkboxes and the checkboxes option

  • autocomplete

    tells the browser to fill in the field with the data entered by the user previously

    It cannot be used ely with check boxes, option boxes, or buttons

  • list

    is used to define a list of default values that will be displayed to the user as possible inputs by the user

    It cannot be used ely with check boxes, option boxes, or buttons

    It is used by associating the id of the control to an item datalist in which we will list the elements that make up the list

    These values are read-only, the user cannot modify them or add new

    The item datalist has no display associated with it, however it can be associated by its id an element label with the that we can display the value chosen from the list

  • maxlenght

    indicates the maximum length that we can use in the text entered

    Used with text box controls or those similar to it (text, password, email, url, tel, search, etc)

  • placeholder

    allows you to add a default text to give an idea to the user the type of control that is or what it is expected to enter in the same

    When used, the element is not usually used label

  • pattern

    indicates a regular expression that will be used by the browser to validate the value entered in the field

    In case the value entered does not fit the regular expression, it will display an error message to the user indicating it

    Used with text box controls or those similar to it (text, password, email, url, tel, search, etc)

  • multiple

    used with the types email and file

    Allows you to include more of an e-mail address or attach more than one file

  • readonly

    prevents the field to be modified by the user

    The browser displayed darkened to indicate to the user that can not be modified

    The value of the field will necessarily attribute value, so it needs to have some value

  • required

    tells the browser that the field is required to be some value

    It is very useful for performing validations because in case the field has not been filled in, it will display an error message to the user

Text boxes

To create a text box in the attribute type we will assign the value text

It has the specific attribute value in which is saved the default value that will be displayed to the user

Has No closing tag

The example specified a form skeleton without attributes, because we don't need it to be functional to display the various controls. We're going to do it with all the examples from now on

We've also included a text box control with the attribute value with the default value Write something here

It is a good practice to fill in this value for the user to have a visual aid of what they are expected to fill in the control

Remaining as a result:


We can also use the item datalist to show the user a list of default values as possible inputs to the text control

In the example you have specified a list of colors by using the attribute list whose value is the attribute id the datalist

In addition, we can use the attribute label to display a label with the content of the selected value

Once a value is selected, we can check that we can't modify it or add a new value, but if you delete it to choose another value from the list

Remaining as a result:



Descriptive labels

In the example above we saw how to create a text box, but for the user it might not be clear what was expected to be filled in the control

To fix it we use the attribute value to show a default value

But we can do it through a descriptive label, using the element label

A label label will be associated always with an element input

We can use two methods to perform this association:

  • inserting the control inside the label label

    Remaining as a result:


  • using your attribute for that will have as value the attribute id the control that we want to associate

    Remaining as a result:


Passwords

It is similar to the text box, but to create a password attribute type we will assign the value password

In the example we can see that the main feature of this control is that the contents of the text box is camouflaged

However, if we use the GET method that password will be visible in the browser bar

That is why it is advisable to use the POST method if you're going to enter passwords

We also have included the attribute pattern that corresponds with a regular expression that adds more security in the validation if you do not meet the format of the expression

The example expression has forced at least one number, one lowercase letter, one uppercase letter, and its length to be eight characters

Remaining as a result:


E-mail

It is similar to text box but in order to create an e-mail to the attribute type we will assign the value email

In the example we can see that the main feature of this control is that the contents of the text box are validated and if an invalid email address is entered, the browser will display an error message

We also have included the attribute pattern that corresponds with a regular expression that adds more security in the validation if you do not meet the format of the expression

In the example expression, at least one lowercase letter or number before the @ has been forced, at least one lowercase letter or number before the. and two or three letters after the.

Remaining as a result:


URL

It is similar to the text box, but to create a URL to the attribute type we will assign the value url

In the example we can see that the main feature of this control is that the contents of the text box are validated and if an invalid URL is entered, the browser will display an error message

Remaining as a result:


Phone

It is similar to the text box, but to create a phone to the attribute type we will assign the value tel

In the example we can see that there is no significant difference with respect to the text box

You could just appear any icon or special image that is generated by the browser or by using a CSS style sheet

Remaining as a result:


Search

It is similar to the text box, but to create a search to the attribute type we will assign the value search

In the example we can see that there is no significant difference with respect to the text box

You could just appear any icon or special image that is generated by the browser or by using a CSS style sheet

Remaining as a result:


Check boxes

To create a set of check boxes with the attribute type we will assign the value checkbox

In this case, the value next to the button will be the same as the attribute name and use the same to form the group of exclusive selection

Has No closing tag

In the example you have specified the choice of gender and has marked the sex Woman by default, using the reserved word checked

Remaining as a result:




Keep in mind that if we check a box it will remain checked until we uncheck it again, if we want the effect of unchecking the unelected options, we will have to use JavaScript

Boxes option

To create a set of boxes option to the attribute type we will assign the value radio

In this case, the value next to the button will be the same as the attribute name and use the same to form the group of exclusive selection

Has No closing tag

In the example you have specified a group of colors and set the color Green by default, using the reserved word checked

Remaining as a result:





Buttons

The buttons normally used to control the send and reset the form

We can add new functionalities to our form using the buttons to activate them when you press them

To do this we will use or a picture or a generic button to which you then assign JavaScript or use Jquery to provide the programming

To create a button with the attribute type we will assign the value button

Has No closing tag

In the example you have used the attribute value to show the user a text and can recognize it

And the attribute onclick which is an event that allows the button to execute JavaScript code, in this case a warning to the user that the button has been pressed

Remaining as a result:


Submit the form

To create a button to submit the form to the attribute type we will assign the value submit

Has No closing tag

In the example you have used the attribute value to show the user a text and can recognize it

This example does not send anything to the server because you have not used the attributes action indicating the target URL or method indicating the GET or POST method

Remaining as a result:


We can also simulate the behavior of a submit button from an image

In the example you have used the attribute value to show the user a text and can recognize it

This example does not send anything to the server because you have not used the attributes action indicating the target URL or method indicating the GET or POST method

Remaining as a result:


Reset the form

To create a button to reset the form with the attribute type we will assign the value reset

Has No closing tag

In the example you have used the attribute value to show the user a text and can recognize it

Si escribimos algo en el cuadro de texto podremos comprobar que si pulsamos el botón reset el contenido del cuadro de texto vuelve a ser su valor por defecto

Remaining as a result:



Attach files

To create a button that allows to attach files to the attribute type we will assign the value file

This button will only be useful if we have chosen the POST method and have included at item form the attribute enctype=’multipart/form-data’

Además del botón aparece una etiqueta con el estado del archivo adjunto, que nos dirá si hay un archivo adjunto y en caso de haberlo su nombre y extensión

Pressing the button opens a system file explorer to the user, with which you can select the file you want to attach

Has No closing tag

In the example you attach a picture to the form, although it is not functional because it has not been added to the attribute action nor does it have a button to submit the form

You have used the attribute ok to tell the browser what MIME-types you may receive the browser when you press the button

In this case, you can only receive images of type jpeg and png

Remaining as a result:


Numbers

To create a box that can force the user to enter a number to the attribute type we will assign the value number

Has No closing tag

The example used the attributes:

  • min

    numeric value of minimum supports, the box

  • max

    maximum numeric value that supports the box

  • step

    controls the increase in numbers, if omitted, by default it is 1

  • value

    numeric value by default

Remaining as a result:


Ranges

To create a range of numbers that can force the user to enter an approximate number to the attribute type we will assign the value range

Has No closing tag

The example used the attributes:

  • min

    numeric value minimum that supports the range

  • max

    maximum numeric value that supports the range

  • step

    controls the increase in numbers, if omitted, by default it is 1

  • value

    numeric value by default

Remaining as a result:


Color palette

To assign a color from the palette to the attribute type we will assign the value color

Has No closing tag

In the example it has been used in the attribute value the default hexadecimal #FF0000

Remaining as a result:


Calendar

To assign a date from one calendar to the attribute type we will assign the value date

Has No closing tag

The example used the attributes:

  • min

    value of minimum date that supports the range of dates

  • max

    value of maximum date that supports the range of dates

  • step

    controls the increase in dates in the calendar, if omitted, by default it is 1

  • value

    date value by default

Keep in mind that the format for dates that are supported by the control is YYYY-MM-DD, es decir, A para un año con 4 dígitos, M para un mes de 2 dígitos y D para un día de 2 dígitos todos ellos separados con el símbolo –

Remaining as a result:


Hidden

Sometimes there is information that the developer does not want the user to be able to see, for this the hidden fields are used

These are fields that the user cannot see, but that are sent next to the form to the server

To assign hidden field to the attribute type we will assign the value hidden

Has No closing tag

The example sends three hidden fields giving the server information about the client, without that information appearing in the user's browser

Remaining as a result:




We shouldn't be able to see any of the hidden fields in the browser, but if we use our browser option View code, we can see that in fact, these fields exist

Text box multiple lines

It is similar to the text box but allows you to write more than a line to do this we will use the item textarea

In the example we can see that the most significant difference with respect to the text box is that we can use more than one line

In addition, we have specified with the attribute rows the number of rows to 4, with the attribute al the number of columns at 50 and with the attribute maxlength the maximum number of characters at 100

Remaining as a result:



Selection lists

The item select it serves to create a drop-down list selection

Its scheme is very similar to text boxes, although its contents cannot be modified, only selected

The elements option form the list and the server will be sent in value of your attribute value

In the example you have specified a list of selection of colors and it has set the color Green by default, using the reserved word selected

Remaining as a result:



Groupings of elements

The item fieldset serves to group related items together

In the example created a group to contain the user access control through login

It has been used the item legend that serves as a title or caption of the group

You have used the attribute required for the fields user and pass are mandatory and if we try to submit the form, the browser will show us an error message

The result is a box that contains all controls and has as its title Login for User

Remaining as a result:

Login for User



Html, Programming language, CSS, Programming, Web Page

CSS

CSS

Cascading style sheets (CSS) are a graphic design language for defining and creating the presentation of a structured document written in a markup language, typically web pages written in HTML or XHTML; the language can be applied to any XML document, including XHTML, SVG, XUL, RSS, etc. It also allows you to apply non-visual styles, such as auditory style sheets

A style sheet is nothing more than a text file with a .css extension. Although style sheets were defined in the mid-1990s, they have had a special impact since their latest release (CSS3), in combination with HTML5

Different style sheets can be applied depending on the device on which we display our website (a large screen, a mobile, printed paper, etc)

Integration of styles in a page

There are several ways to integrate styles into a page. But normally we'll use one of these two:

  • Included as a label that is part of the HTML

    The problem with this option is pretty obvious. If in the future we would like to change the color of the paragraphs containing the text, we would have to search one by one for all occurrences and change them manually

  • Defined as a style rule in the header

    On a real web page we'll use more than one style rule, so it won't be a good option to add them one by one in the header

  • Defined with the label <link> to an external file

    Normally we will use more than one style rule, so it will be a good option to add them from an external .css extension file and link them in the HTML header with the tag <link>

Structure of a style sheet

A style sheet defines one or more rules that are applied to items that meet this rule

Each rule consists of two parts:

  • Selector: indicates which elements we're going to apply the rule to. More than one selector can be written for the same rule separated by commas
  • List of statements: the styles to apply to items that comply with the rule. They correspond to a couple property:value, separated by semicolons

The example defined a rule that applies to all paragraph p-elements in the HTML. In addition, the text has been set red, its font as Verdana, and its paragraph alignment is centered

Additionally, we can add comments, which will be written between /* and */

You can also add at directives (which start with a button), which change the way you apply the rules

DOM tree

The document object model (DOM) is the structured, tree-shaped representation of all elements written in an HTML document

For example, any HTML document starts with the tag , also containing the labels and , with their respective closing labels

On the other hand, within the header (label <head>) will in turn contain elements with labels <meta>, <link>, <title>, etc

And the body (label <body>), will in turn contain more elements and so on until it reaches its closing labels

The hierarchical structure resulting in computing is called a tree

Specifically, the tree that represents the structure of an HTML document is DOM

Thanks to this tree-shaped structure, we can uniquely identify each element of the HTML document, depending on how those elements are related to each other, we will be able to apply different style rules to them

The relationships we can identify are:

  • Descendants: are all elements contained (directly or indirectly) by an element

    For example, <head>, <meta> or <body> they are descendants of <html>

  • Direct Son: they are the descendants of first level

    For example, <head> he is the son of <html>

  • Brothers: descendants who have a common father

    For example, all the elements <meta> are brothers if

Thanks to these relationships within the DOM, in the example we used earlier that affected only the elements <p>, we could also apply it to the elements contained in a division <div> that contains a class or an id specific

Or we could create rules for siblings that share a node

By relying on the JavaScript language and the DOM, you can modify the content of the elements once the website is loaded into the browser

Cascading style

Thanks to DOM we can identify the specific elements of an HTML document, and therefore we can apply the style sheets

A style sheet can contain different rules that configure the same element, we can even have multiple style sheets with conflicting rules

In this example, our rules say that for every element of the <body>, including its descendants, will be applied to it the black background color and the red text color

In the following rule, we tell you that in the element <p> paragraph, the text must be blue

The final document will have all the black background color elements and the red text, but in addition the paragraphs will have blue

The rules have been applied to each other, in the form of a waterfall. That's why they are called Cascading style sheets (CSS)

In general, styles are inherited. First they set the property of the parent element and their descendants inherit them, to finally apply their own, which in turn are inherited by their descendants, until they reach the last descendant node of the style sheet

In the event that we have two elements that are brothers and there is conflict to see who inherits which property, the most specific one is applied and if they have the same properties, the last style defined will be applied

That is, if a rule is defined in two external style sheets, the sheet rule that was later included in the HTML document will be applied. That's why the order in which we include them is very important

First we will include the leaves, more general, and then those that are more specific

If you have embedded a rule in the HTML, the style that has been defined will be the one that will have the highest priority than the rule that is included in the HTML header

In short, the following priorities will apply when applying a rule to a particular item:

  1. Finds all the statements that apply to the item
  2. If there are no rules, the inherited value will be used

    If there is no inherited value, the browser will apply the default value

  3. If there are rules, the highest priority will be applied according to the following criteria:

    • A weight is assigned according to its origin: author, user or browser style sheet
    • Attributes with the !important keyword: will have higher priority
    • Specific selectors: will have higher priority
    • Two rules with the same priority: applies the indicated in last place

CSS Reset

Each browser has its own style sheet by default

This implies that the default style of some elements can be different for each browser

For this reason it is advisable to restart the styles applied to the elements by adding a special CSS (the CSS Reset) at the beginning of our web pages

There are multiple CSSs that perform this task (such as those used in frameworks Yahoo YUI, HTML5 BoilerPlate or Normalize), but one of the most popular is Eric Meyer considered as one of the gurus of the CSS

To add it you only have to save the file in the css folder contained in the root of your web site and define it with the tag <link> in the header of your HTML:

Html, Programming language, CSS, Web Page, Programming

Selectors

Selectors

The selectors are used to identify the elements to which it will apply the format defined in the list of statements

There are different types of selectors that can be used to define CSS rules

Let's describe them from the most general to the most specific (from the point of view from lowest to highest priority)

Universal Selector

It is set to * and applies to all elements of the page:



The example has configured the margins and font of the text, which are usually some of the most commonly used rules

Tag Selector HTML

Indicates the style to be applied to an element or a specified tag

Its there's more than one, they'll be separated by commas



In the example, labels 1 to 5 of the title have been set, applying the font of the large text

As can be seen, we can do without < and > the label

Class Selector

Some HTML elements have the attribute class that indicates the classes to which the element belongs

This attribute allows us to treat that element "class" in a specific way, both in css style application and in its behavior programmatically with JavaScript

To apply the class selector, we'll use tag.class

In the example, we have configured the text in blue color for all the elements of the header class, because if we do not specify a label, the universal selector *

In the example you have set the text alignment centered only for the elements of the class header, which belong to the title tag <h1>

We must take special care not to leave spaces between the label, the point and the name of the class, since that space is significant, as we will see later

Selector id

Some HTML elements have the id attribute that indicates that this unique identifier it belongs to that particular element

To apply the identifier selector, we'll use tag#id

As with classes, it is very important to use the spaces

The example has set the background color of the text to yellow, in that paragraph that has the featured identifier

Selectors, descendant, and adjacent

These selectors allow you to select elements that are contained within other according to the structure of the DOM tree

This is where spaces take importance, because if we separate two selectors with a space, then we will be applying the rule to all descendants of the first selector

In the example you have set the text font as Verdana for all the elements <p> that they are descendants of the element <section> (remember that they can be descendants of any level, since that rule will be inherited)

Can be mixed interchangeably selectors descendants of a class or id

In the example, we have configured the text color as red for any element of the class error that is a descendant of the element

If instead of applying it to all descendants we want it to only apply to direct descendants (children), then we will use the >

In the example, we have configured the font of the text as Verdana only for the items <p> that are children of the element <section>

We can also select the sibling elements, that is, those that appear right after other elements, then we will use the symbol +

In the example, we have configured the indentation of the first paragraph that appears just after the title tag <h1>

Selectors of attributes

These selectors are used to select elements based on their attributes

There are four types:

  1. [attribute]: elements that have an attribute named attribute, regardless of its value
  2. [attribute=value]: elements that have an attribute named attribute with the specified value
  3. [attribute^=value]: elements that have an attribute named attribute and whose value starts with the specified value
  4. [attribute$=value]: elements that have an attribute named attribute and whose value ends with the specified value

In the example, we have set up a link that we want in a different color if it leads to a url with secure HTTP

Pseudo-classes

There are selectors special to specify elements that have certain properties

They are classes virtual, because they are not specified in HTML, but represent the positions or states in which an item can be found while viewing in the browser

The example has been configured to apply only if an item is the first child of its parent, for this we have used the first-child pseudoclass, only the first element <li> from a bullet list (<ul>) will appear in green

There are other pseudoclasses that will help us select a specific brother from among the children of an element:

  • :nth-child(n) : represents the n-th brother

    It allows you to include a more complex form such as:

    • :nth-child(even) : that represents the children who occupy positions pairs
    • :nth-child(odd) : that represents the children that occupy odd positions

    (for example to make odd rows in a table have different background color and have a hebrew effect on a table)

  • :nth-last-child(n) : similar to the previous one, but starting to count from the end

There are also dynamic pseudoclasses, which indicate the status of items when the user interacts with them:

  • :hover : is used to set the style when the user mouses over the element
  • :active : is used to set the style when the user click on the item or keep the mouse button pressed over it
  • :focus : is used to set the style when the element has focus

Pseudoclasses related to links are also very typical:

  • a:link : sets the style of the link when it has not yet visited or when the user has not already pressed
  • a:hover : set the style when the user places the mouse over the link element
  • a:active : set the style when the user clicks the link
  • a:visited : set the style when the user has already visited

The example has set the status of unvisited, visited or mouse-based links

When using this CSS, the links in the document will appear un underlined and green

By placing the mouse over them they will stop at blue and, once visited, they will turn red

Example of Selectors in action

In the following example has included an HTML page and several of the selectors explained above

You can check the result by viewing it yourself in your browser and if you don't use a CSS reset, you might have different results in other browsers

Now we show the contents of the exampleSelectors.css file