Entradas Html

Reading and writing XML files

The name XML comes from English eXtensible Markup Language (extensible markup language). Obviously we are not going to entertain ourselves by telling the history of these archives, since if you are really interested you can consult different bibliographies found on the Internet. The purpose of these files is quite clear: to simplify communication between devices. That is, to facilitate the communication of several devices with respect to a database, being able to collect readings and writings, and greatly facilitating their interpretation because they are files whose content has a certain hierarchy, if it can be called that .

In this way, an example of an XML file could be the following:

As you can see, we have a main element that is Edit_Message that is made up of an element that is Message and in turn is made up of other elements: Sender, Recipient and Text.

As you can see, the labels have both opening and closing, the text between them being the value of each label. The tabulation is something that is NOT mandatory, but as you can see, it makes understanding the content of the XML file much easier.

Using SimpleXML

  • PHP’s SimpleXML extension makes it easy to work with XML specifications.
  • This extension is available in version PHP 5 and is enabled by default.
  • The simplexml_load_file (file) function takes as a parameter the path where the xml file is located and returns a SimpleXMLElement object with the data from the file.

SimpleXML usage example:

simplexml reading example


First of all we are going to start with reading elements in XML files. We are going to see two types of readings:

  • Reading elements
  • Attribute reading

It is not really that there are two types of readings as such, but we do want to highlight more than anything how you can access both the elements and the attributes that they could have.

Reading elements

  • The SimpleXMLElement object stores all the elements of the XML specification using arrays.
  • In this way, it is possible to access the different elements through iteration techniques.
  • This example shows how to access the name of the first customer.

loop through xml elements course of html and css

Attribute reading

  • In the previous example, we have illustrated how to access the elements and their values
  • It is also possible to access the attributes of the elements
  • For this the attributes are also organized in arrays
  • In the example above, the identifier of all clients and the name could be accessed as follows:

loop through xml attributes course of html and css


As we have already seen with reading, in writing we can add elements to the XML file or attributes, creating two possibilities when wanting to modify a file with these characteristics.

  • The function children allows access to all child elements of a given element.
  • The function getName allows access to the name of an element
  • In this example, all elements that descend directly from the address element are accessed and iterated through them, accessing their name and value.

Item writing

  • The function addchild allows inserting a child node to an element
  • This function takes two parameters:
  1. The first element indicates the name of the tag
  2. The second element indicates the value of the element
  • In this example, a new element called “status” is added to all clients and takes the value “deactivated”

add xml elements

Writing attributes to elements

  • The function addAttribute allows adding a new attribute to an element
  • This function takes two parameters:
  1. The first element indicates the name of the attribute
  2. The second element indicates the value that the attribute takes
  • In this example, a new attribute “type” is added to all customers and it takes the value “requestor”

add attribute to xml element

Save the changes made in the XML file

  • After creating or modifying the XML specification it is necessary to save it in the corresponding file.
  • The asXML function takes as a parameter the path of a file where it will save the XML specification.
  • This function returns TRUE if the specification was written correctly and FALSE otherwise.

save changes XML files

HTML and CSS course: next installment

After having seen the most essential of this language (we still have many things) now it is the turn of the style sheets or CSS. So next week we will have an introduction to style sheets and how their use of each affects the web project.

Entradas Html

creation, structure and use of tables

It must be taken into account that today, in HTML programming, tables can be used not only to organize information, but they can also be used to distribute the components on a screen, or even to contain another table with information.

Although when it comes to distributing components we will see something later in the course that will help us and that is aesthetically much more professional than using a table, for now we are going to be governed by these.

Structure and creation of HTML tables

Although it may seem very cumbersome at first, once you see the mechanics it is very easy. We assume that if we want to create a table, we must first make use of the labels

, which should make us think that everything that goes inside those two labels will be the content of the table. Having already the table label, we are going to clarify that to declare rows we must use the labels

. That is, all the elements that go inside these labels will be part of the same row. But we are left with an important issue: the columns. In this case, the way we create columns is with the labels

. Although we do not want to lie to you, these labels do not create columns as such, but allow the division into cells of a row, creating the columns. What we mean is that you can make rows with the labels

, but in the case of columns it is not possible and there is no label that performs such a function.

To see this, we are going to use an example in which we are going to create a table with two rows and “two” columns.

1st row, cell number 1 1st row, cell number 2
2nd row, cell number 1 2nd row, cell number 2

This is about the basic structure of a table and it is always true. However, we have not forgotten the headlines. Although it could resort to creating a normal row using normal cells, we are going to show you another tag that allows you to create column headings in HTML tables, the


An example with which you will see it easily:

Column 1 Column 2 Column 3
Cell in column 1 Cell in column 2 cell in column 3

Height, width, and element spacing parameters

With what has been seen previously, tables can be created in a basic way without any form of form. However, all the labels that make up the tables admit certain parameters that allow the modification of their appearance.

In the following table we wanted to collect the relationship between modifiers and labels to try to make it easier to understand when each of them can be used.

Note: keep in mind that when you view the table above, it is possible to assign a different height to each of the cells that make up a row. This should not be a problem for browsers and many would show them, but keep in mind that the table could be out of square.

HTML table aesthetics

To choose the location of text within cells, you can use two parameters that can be used in the

tag. We refer to the align and valign parameters, and in the following table you can see how they are used and what values ​​they can take.

HTML and CSS course text parameters tables

An example of everything seen so far

What better way to understand everything related to tables than to make an example in which you can find everything we have seen in today’s delivery of the HTML and CSS course.

Row number 1, cell number 1 Row number 1, cell number 2
Row number 2, cell number 1 Row number 2, cell number 2

Even if you want to customize the appearance of the cells a little more, you can use the parameters bgcolor and bordercolor, which allow the assignment of a cell background color and the cell border, respectively.

Put a table in your life, but not many more

As you can see, the tables can be very comfortable when determining the location of elements on our website. However, and despite the fact that these may contain buttons, text spaces or even other tables inside them, it is not advisable to abuse tables in the design of a page, since it is one of the tasks that takes the most time for browsers : get to interpret tables and locate the elements correctly.

In the next chapter we are going to start looking at the main types of “input” that exist in HTML and that we can include in our design.

Entradas Html

Use of information collected in forms

The reason why we say this is that in the latter we talk about everything related to the PHP language, something that is necessary and mandatory to read in order to understand what we are going to talk about in this new installment.

As we indicated previously, forms is something that has to be applied to practically all web pages, and that is essential if we are talking about pages that handle user data. For this reason we are going to see how this can be done using the PHP language.

How to implement forms with PHP?

In previous installments we have seen that to create forms the

tag had to be used, within which all the necessary inputs were included to be able to request information from the user. However, for this to be possible and for PHP to work, you will first need to add two tributes to the form tag:

  • Action: that specifies the name of the PHP file that will process the information contained in the form.
  • Method: for now we are going to take the POST value, the reason is to prevent the information sent to the script either using the URL.

In addition, it will be the mandatory use of an input of type «submit», that is, the button which will indicate to the server that the data entry has been completed and that it is sent to be processed.

For example, we have the following .php file:


In this case we have the file with the form, in addition to the label

with the conditions that we have mentioned above. As you can see, it will be necessary to create another php file called «server.php»And who will be in charge of treating the information provided:

echo «your name is:«;
threw out $ _POST[«nombre»];

Note: It is very important that input They are assigned a name, since as we can see in the previous code, when it comes to treating the information provided, it is done through $ _POST[«nombre del input»].

Reading information about the different types of input with PHP

We are going to illustrate the way in which the data of the input most used. Keep in mind that below all the client.php are incomplete, so it will be necessary to add everything necessary that we have explained previously. The server.php yes that are complete and can be copied and pasted.

Type text



Enter your last name:


echo «your last name is:«;
echo $ _POST[«apellido»];

Radio type





echo “Your car is:”;
echo $ _POST[«coche»];

Checkbox type



air conditioner

window lifter



$ auxiliary = $ _ POST[«opciones»];
$ n = count ($ auxiliary);
echo “These are the options”;
echo “

for ($ i = 0; $ i <$ n; $ i ++) {
echo $ auxiliary[$i];
echo “


HTML and CSS course: next installment

In the next installment of the course we will deal with everything related to XML files, and taking a closer look at how a structure can be created, and the process to be able to read and write in this type of files, which can be used to store related data with a web

Entradas Html

use of style sheets

As we have mentioned before, in the previous installment we could see how style sheets could be implemented. Before we go into detail about the most important properties that can be covered by making use of these, let’s go into detail about the style sheet hierarchy and how it can affect an HTML document.

Styles can be applied today by making use of an external CSS document, a declaration in the header of the HTML document and in the tag itself that is being used within the body.

But what if we use all three forms at the same time? The order of priority in which the style would be applied would be as follows (ordered from lowest to highest priority):

  1. External style sheet
  2. Style defined in the head tag
  3. Style defined in the specific label

Style sheets: Properties that can be used

Properties used to determine the background of the web

  • background-color: Specifies the background color of an element
  • background-image: Specifies an image that will be the background of a certain element

Properties used to format text

  • color: Specifies the color of the text
  • text-align: Specify the horizontal alignment of the text
  • text-indent: Specify the indentation of the first line of the text


Properties to define the fonts used

  • font-family: Specify the font family or generic family to use. You can specify several of them and they are processed from beginning to end until you find one that the browser supports.
  • font-size: Specifies the size of the font. It can be done absolutely by defining the number of pixels. An alternative unit to pixel is em (recommended by W3C)


Properties for hyperlinks

You can use properties to define different formats for a hyperlink depending on the state it is in

A hyperlink can be classified into four states:

  • Visited: The user has already visited the link
  • Floating: The user has placed the course on the link, but has not visited it
  • Active: The user clicks on the hyperlink
  • Normal: The user does not interact in any of the above ways with the hyperlink


Table properties

  • width and height: They allow to define the width and height of the table elements in a relative (percentages) and absolute (pixels) way
  • text Alignment: Allows you to specify the alignment of the content with respect to the horizontal axis (possible values: left, right, or center)
  • border: They allow you to define the color and thickness of the border of the table
  • padding: Allows you to define the distance between the border and the elements contained in the table
  • vertical-align: Allows you to specify the alignment of the content with respect to the vertical axis (possible values: top, bottom, or middle)


HTML and CSS Course: Next installment

In the next installment of the HTML and CSS course we will see how these styles can be applied to div tags, with different styles being able to apply the function of the div in which we are. We will also propose a brief implementation exercise to which we will later put a solution to serve as an example.

Entradas Html

tags, arguments and our first page

As in any programming language, there are some basic notions to understand the technique that the language has and that will help us to understand its mechanics. In the case of HTML, these basic notions are tags and arguments. The tags are closely related to the visual aspect of the page while the parameters could say that they are a complement that the tags have. It should also be noted that each label is related to a series of arguments, which already makes us see that not all labels will have the same arguments.


Although we have advanced it before and we have glimpsed what they consist of, the labels tell the browser how it should interpret the information.

Within the labels, two main types can be distinguished:

Empty labels

They are mainly used to introduce elements to which a specific type of shape is not associated, with line breaks, horizontal lines, vertical lines, etc. being able to use this type of labels.

The following format corresponds to this type of labels:


Tags with content or containers

Unlike the previous ones, these tags make the potion of the web page they cover dependent on the characteristics of the tag and the arguments that are used in it. It must also be said that unlike the previous ones, these have a beginning and an end, or what is the same:

<etiqueta> .... </etiqueta>

The end of a tag is indicated by “/”, which makes everything inside the beginning and end interpreted according to the tag and the arguments.

It should also be noted that a tag can contain other tags, or what is the same:





Note: It is very important to open and close the tags when they correspond, since closing them in a wrong place can cause an anomalous behavior when interpreting the web page by the browser.

An example of how tags can be used could be to italicize and bold text simultaneously:


Note: there is no order in this case to apply the format to the text, but we must bear in mind that later when we see more elements we must respect the order (more than anything because there is a logical order for certain things) and we must Remember that you should always close the labels in the opposite order that they were opened, that is, the last one that was opened will be the first to be closed.

For example:



As we have indicated previously, the arguments are in charge of formatting the labels, and although we will see in more detail which arguments exist, it must be said that these indicate, for example, the size, placement on the page, action when clicking with the mouse, ….

What better way than to see this using an example:

<h1 align="center">Un encabezado</h1>

With this, what we have done has been to create a heading, whose content is going to be aligned in the center of the page and which is going to have the value of “A heading”.

Another example:

<font color="blue"><b>Texto de prueba</b></font>

In this case we have a text that in addition to being blue, will be in bold.

My first website

Every web page in HTML must have a series of fixed tags that are responsible for the browser to interpret it as such.

The tag must always be used in any html file, and its end must always close at the end of the document ().

The tag goes just after the opening of the previous one and must be waxed before the body begins. In this case, within this tag you can indicate the title of the page that will be displayed in the browser, the CSS sheets used by the document and you can declare scripts or indicate which document or script documents it uses.

The tag is the body of the document and covers everything that will be interpreted by the browser. Its closing tag () must always be closed before the html one.

It is time for you to take your text editor and copy the following code into a document, you can put whatever name you want, but it must have the ending .html so that the browser can interpret it.


<title>Curso gratuito de HTML y CSS de RedesZone</title>
Mi primera página web utilizando HTML

Once you have saved the following code in a file, you look for them and open them using the browser. We already have our first website.

As we have already learned the basics, in the next installment of the course we will learn everything related to creating paragraphs and how to format text.

Entradas Html

HTML and CSS course: Compilation of solved exercises

As we have progressed with the theory, we have been providing you with examples so that you could check what was the result of the interpretation of said code by the browser. However, we wanted to give you some much more concrete examples and thus also give you the possibility that you can work on a base file in order to obtain different results.

Before leaving you with the list of exercises, which you will be able to download, we are going to briefly explain everything related to them.

What should I know about these exercises?

Obviously, within the course there are more complex things and others that are much simpler, so it did not seem very logical to have only exercises with a high degree of difficulty.

Among the list of exercises you can find very basic exercises that refer to the first volumes of the course serving as an aid to the introduction of the programming language, and as you progress you can find exercises with greater difficulty, including exercises of forms.

The exercises can be downloaded from here.

The way to use the exercises is unzipping the folder and respecting the folders that are inside (that is, the hierarchy). In this way we will ensure that the CSS style sheets are applied correctly to all HTML files.

Once you check the HTML and CSS code and the result obtained, you can modify both files to see what the result of adding or deleting code would be.

About the HTML and CSS course

Although it could be said that we have reached the end of the HTML and CSS course with this compilation of exercises, we are going to leave a way open so that using the delivery rate of the course you can present suggestions on possible articles. For example, if there is a user interested in Javascript or in a more in-depth explanation of what the image maps consist of, we would be willing to carry out said delivery of the course.

In other words, now it’s up to you to decide and propose what you want to see with respect to HTML and CSS.

Entradas Html

HTML and CSS course: forms and input tags

Forms are very important today on web pages and are used primarily so that the user can relate to the web page and that it can process information. To create a form we will not use the labels

, being able to place between these any other labels, being mainly labels of type input those that are going to be used. In addition to the type labels input, it is very important that the form has a “send” button, so that the information located in the input have some use and be processed and stored, if it is the case.

When dealing with the information entered in the input It is very important to take into account that pairs of information are handled, or what is the same, each input it has a name and thanks to that name you can access the information contained in it.

The input tag

These labels refer to controls that are used to enter and manage information on a form. There are several types associated with these tags, but they all have in common the way they are declared in the HTML code:

  • He type refers to the declaration of the input tag type that we want to declare.
  • Yam refers to the identifier of this label and it is essential as we said before to identify the content of each label.
  • Value refers to the value that you want the label to have by default. Most of the cases will be empty but it is probable that in a certain situation we want the label to have a default value as an indication.

The different types of labels

Text fields

As their name suggests, they allow the user to enter a text that will later be processed. Using attributes like size or maxlength the user can delimit the number of characters to be entered.


type = “text”
name = »textspace1 ″
size = “num_caracteres”
maxlength = “num_caracteres” />


This type acts in the same way as the text type. with the only difference that in this case the characters that are being typed are not displayed. In the same way as the text field, the length can be delimited with the attributes maxlength and size.


type = “text”
name = »Password1 ″
size = “num_caracteres”
maxlength = “num_caracteres” />

Check box

They are used when the user must choose between several options that are given to choose from. If we want the checkbox to be marked by default, we just have to add checked in the declaration of this.


type = “checkbox”

Radio Button

This type of tag has practically the same functionality as the previous one, with the difference that in this case only the selection of one at a time, while the check box they allowed the user to select several at the same time. As in the previous ones, a default box can be selected.


type = “radio”

Send files

This type allows a control to search for a file that will be sent to the server. This control also includes the dialog box through which the search can be carried out.


type = “file”

Text areas

It is a type that allows the user to have a text field but which is configurable in terms of the rows and columns it occupies. In this way, thanks to the attributes rows = “num_lines” and cols = “num_columnas” allows configuration of its size. Does not have the label value but it can be assigned an initial content


Drop down lists

This is a drop-down list in which the user must select an item. You can configure how many elements the list has and also indicate how many elements are visible without it being displayed.


Submit button

This tag does not generate any type of value, but it is in charge of starting the process of sending information. Clicking on this button causes all the values ​​entered by the user to be sent associated with the name of the input in which they have been entered.


type = “submit”
value = “text_on_send_button”

HTML and CSS course comes to HTML5

In the next installment of the course we will see all the news that have been introduced in the new version of HTML and we will be able to see how most of them are implemented, many of them being very interesting and useful when building a web page.

Entradas Html

Introduction to style sheets

Since this is the first time that we talk about style sheets, we will try to briefly tell what it consists of, the uses that can be given to them, how they work, the hierarchy that exists when assigning styles and we can also see some examples that will lead us to the next installment, which is when we will be able to see the style sheets in much more depth.


Cascading Style Sheets (CSS) is a mechanism that describes the format of a web document but does not constitute the key to obtaining high levels of usability

They also allow the design of user interfaces with an excessive cognitive load, forgetting the simplicity and ease of use can make the system not accepted by the user even if the style sheet includes a multitude of formats with different colors, fonts, etc.

In short, the style sheets are called to facilitate the programming of web pages, at the same time to avoid repeating the code absurdly several times and on different pages.

What are they for?

Everything we have said so far is very good and on paper it seems quite interesting, but you may be wondering what style sheets are really for. Do not worry because now we list a series of points in which you can see its usefulness:

  • CSS is used to style HTML documents, separating content from presentation.
  • Styles define the way HTML elements are displayed.
  • CSS allows Web developers to control the style and formatting of multiple Web pages at the same time.
  • Any change in the marked style for an element in the CSS will affect all pages linked to that CSS in which that element appears.

How do style sheets work?

We have seen a brief theoretical introduction of the style sheets and we have also been able to see the use they have. However, we still lack an important part of these: how they are used.

Here we explain how style sheets work and what components it is made of.

  • CSS works on the basis of rules, that is, declarations about the style of one or more elements
  • Style sheets are made up of one or more of these rules applied to an HTML document
  • The rule has two parts: a selector and the declaration. In turn, the declaration is made up of a property and the value assigned to it.

An example:

  • The selector works as a link between the document and the style, specifying the elements that will be affected by that declaration
  • The declaration is the part of the rule that states what the effect will be
  • In the example, all the h1 elements will be affected by the declaration where it is established that the color property will have the value red (red) for all the h1 elements of the document or documents that are linked to that style sheet

Apply style sheets to an HTML document

What we have seen so far allows us to get an idea of ​​how style sheets work and what effect they have on a document, however, we still need to know how they can be applied to a document.

There are three ways in which style sheets can be applied:

  1. Using an external style sheet that will be linked to a document through the element, which must be located in the section.
  2. Using styles directly on those elements that allow it through the

    Title in color

    Paragraph with margin.

HTML and CSS Course: Next installment

After having introduced the cascading style sheets, the next installment we are going to see in its entirety to see the implementation of this type of programming and some fundamental rules that must be taken into account when dealing with the style sheets in the HTML documents.

Entradas Html

formatting of text and paragraphs

And is that what web page does not have any paragraph in some of the pages that make it up? Practically all of them have a paragraph that is accompanied by other elements, such as images, forms, … To create a paragraph in HTML we must use the tags

to open and close respectively. The simple inclusion of the tag causes a separation between different paragraphs. Therefore, this translated into code would look like this:

This is a paragraph

If what we want is to create a paragraph with lines of a certain length, and that does not depend on HTML, it is advisable to use the tag for, for example:

This is the first line of a paragraph
and this is the second

As you may have seen, I have followed everything instead of jumping the line after the
. It can be done in both ways because you have to take into account that the browser interprets the tags.

You may be thinking that how can this be seen more clearly. Create an .html file and paste in it the code that we put below:

Example of paragraphs

Example paragraph

Another example paragraph and different from the previous one

Note: In addition to labels
you can use the keys to make words bold, italic, or underlined ( , , , respectively).

And now you will be thinking that you do not like the location of the text and that you want another, for that the paragraph tag has a parameter thanks to which you can modify the alignment (align). An example:

This is a paragraph that is centered

As you have already been able to deduce, if nothing is indicated regarding align, the natural position of the text is as far to the left as possible.

We are going to put an example where it looks good, as before you can take and copy the text in a file so that later you can visualize the result with the browser:

Example of paragraphs

Paragraph to the left

Paragraph to the right

Another example paragraph but in the center

Paragraph text formatting

Once we have learned to create and align paragraphs, we can continue playing with the arguments that can be given to it to give some formatting to the text.

For now, we are going to see that the text can be modified by adding the tag to the paragraphs. Later, when we start with CSS we will see that this can be done using style sheets to simplify programming.

To see how this tag is used, what better than to use an example:

Paragraph with arial font

As you have observed, it is within the tag where the formats that we want our text to have are applied.

Another example, in this case modifying the color from the text:

Paragraph in red font

There are a series of colors that are defined in HTML, but for many others that are more personalized, it will be necessary to use the hexadecimal code that we have probably seen at some time. For example, the white color code is #FFFFFF whereas the one of the black one is to replace the F by zeros. On the Internet there are many sites where they provide you with a table with the hexadecimal code to use for each color.

Here we leave you with one so you can see and play a bit. You have to add the pad at the beginning.

We will also use the modifier size:

Paragraph size 5

And if what you are thinking is if all these modifications can be done in a single line and in a single paragraph at a time, the answer is yes:

Example of the three modifications

So far we have come in this installment. We invite you next week to start with images: inserting images as the background and on the page as a companion to the paragraphs. Do not forget to consult our delivery rate if you have missed any.

Entradas Html

background and body images

Although you can think that the image is a relatively recent advance, the truth is that browsers began to support images (specifically the formats GIF and JPG) long before broadband became very common. First Mosaic and then Netscape, were the first browsers with the ability to display images. That it serves as data, Mosaic It is considered one of the most important browsers on the Internet, which gave rise to browsers that have been as important as the previously mentioned Netscape and Firefox.

In this installment of the HTML and CSS course we are going to discuss the insertion of images as a background, the use of images as part of the HTML documents, and how the appearance of this can be configured thanks to the arguments they have.

Pictures as background

Until this moment in the course we have been able to see how the background on which the objects were presented was white. Today we are going to take a step further and we are going to configure the background so that it has an image that we choose.

We go with the base code that is used in all the pages:

Background image

With this we have a blank page, but what we want is for it to at least show us an image as a background. For that we must add the following to the tag:

The end result would be this:

Background image

Keep in mind that the image we use must be at least in the same folder where our HTML page is located. If it is in a subfolder that is in the same location as the HTML page, we must mention this image in the following way:

In the case of wanting to use an image that is hosted on the internet, it is only necessary to specify the full URL of the image and it will appear as the background.

Images as part of the document

To insert an image in the body of the document it is necessary to use the following sentence:

With this image what we are going to do is make an image appear in the place where the label is located. Obviously, we do not want only this, but the image is in the position that we want.

With the argument align We can choose which is the location of our image using the values: left, right, top, middle, bottom.

Example of use:

Alt, width, height and border attributes

All the attributes that we are going to deal with next are used in the same way as align, and all those that are needed can be used at the same time. Attribute alt refers to an alternative text that can be included in the image and that will be displayed when the user hovers the mouse pointer over the image. In the case of width and height what is indicated is the width and height with which the image will be displayed. If these are not present, the image is displayed in its actual size. It is a percentage, so if we indicate for width a value of 90 and height of 80, it means that the image will be displayed with a width value that will be 90% of width and 80% height. In the case of border what it indicates is the value of the thickness of the image frame. With value 0 or this argument omitted, the image has no border. For positive values ​​greater than 0 the number represents its thickness.

So far today’s delivery. In the next installment, we will shape our website and begin to link content from different pages that make it up. This means that we will talk about everything related to links.

Remember that you can check the previous deliveries of the course in the index.