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.
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:
First of all we are going to start with reading elements in XML files. We are going to see two types of readings:
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.
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.
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:
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 childrenallows access to all child elements of a given element.
The function getNameallows 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.
The function addchild allows inserting a child node to an element
This function takes two parameters:
The first element indicates the name of the tag
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”
Writing attributes to elements
The function addAttribute allows adding a new attribute to an element
This function takes two parameters:
The first element indicates the name of the attribute
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”
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.
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.
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:
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.
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.
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
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):
External style sheet
Style defined in the head tag
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
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.
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:
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.
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”.
<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 ().
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.
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.
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
In other words, now it’s up to you to decide and propose what you want to see with respect to HTML and CSS.
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
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 ″ common_attributes 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 ″ common_attributes size = “num_caracteres” maxlength = “num_caracteres” />
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 checkedin the declaration of this.
type = “checkbox” common_attributes checked />
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” common_attributes checked />
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” common_attributes />
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 valuebut 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.
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.
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.
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:
Using an external style sheet that will be linked to a document through the element, which must be located in the section.
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.
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
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.
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:
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
The end result would be this:
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 alignWe 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.