Web programming languages, Dispense di Programmazione e Tecnologie Web

Scarica Web programming languages e più Dispense in PDF di Programmazione e Tecnologie Web solo su Docsity!

Web

programming

Index

• How do websites actually work?
• Tools for Web development
• Front-end Web Development
• HTML
• Text management
• Multi-page
• Project example
• CSS
• Colors
• Font
• Borders
• Grouping
• Hierarchy in CSS
• Combine different selectors
• Positioning
• Display
• Responsive
• Media Query
• Flexbox
• Grid
• Bootstrap
• Project example
• Web Design principles
• JavaScript
• JSON format
• Exercise
• Document Object Model
• Exercise
• jQuery
• Exercise
• Back-end Web Development
• HTTP
• Node.js
• Node modules
• Express
• EJS
• API
• Project example
• Database
• SQL
• Exercise
• PostgreSQL
• Exercise
• Authentication
• React.js
• Project example
• Thanks

We will see that web applications (application that runs on the network) will be composed of two main blocks:

• Front-end : deals with the representation of the web page of our application. This includes technologies like HTML, CSS, JavaScript, and some frameworks like React, Angular and Vue.
• Back-end : define the logic of the application, managin requests and responses. This is accomplished with any programming language such as Java, Ruby, PHP, C#, Python and again JavaScript, also supported by different frameworks like Java Spring, Rails, Laravel, ASP.NET, Flask, Django and Node.js. A programmer that is able to build both the front-end and the back-end of a web application is called a Full-stack developer.

Tools for Web development

Different set-up exists to start with Web development. I personally suggest to start with Visual Studio Code, a powerful IDE that makes possible to create different files, with an integrated terminal, offering a single place where to write your code and see the result.

1. 1. Create a folder
2. 2. Open it with Visual Studio Code
3. 3. Create the necessary folders and files and open them with the browser to see the result. Your files will be opened with a Browser. I suggest to install Google Chrome, which is well supported and the more stable

Ordered list use the tag :

Milk Eggs Flour

The number of the items will depend on the order you put the elements into the list. Lists can also be nested to each other simply by adding one list inside a list item element:

Item of outer list

Item of inner list

Item of inner inner list

Other inner item

Other outer item

Some tags need the specification of attributes, that are additional pieces of information used to customize the functionality of our tag. The general pattern is: < _TAG ATTRIBUTE="VALUE" ATTRIBUTE="VALUE" ... > CONTENT _ Anchor = allows to create hypertext connection between different pages, that can be another link or another .html file. We use the tag with the "href" attribute that specify in quotation marks the link or the .html file where we want to go after clicking on it. This is a link If no href is specified, the anchor is "not active", thus it's not clickable and will appear as normal text: This is a not active link Also, we can make the anchor tag draggable with the pointer of the computer using the attribute draggable and set it to true or false. This is a draggable link

Break rule = create a new line in the text.
It is used to break our text without creating a new paragraph.

This is a pragraph
Also this is a pragraph

Not all the tags need to be closed. This was necessary until now becase the tags we have seen had to wrap some content. Some tags do not wrap anything, and for this reason they do not need to be closed. __ Horizontal rule = show an horizontal line.

It is used to visually divide the text in our code:

This is a pragraph

Also this is a pragraph

Images = add images to our page by specifying as attribute the url of the image with "src". Also, the alternative description of the image can be added with the attribute "alt", used by tools for people with visual impairments. Finally, the image dimensions can be adjusted with "width" and "height" specifying or the percentage proportion respect to the original size, or the exact number of desired pixels.

... : contains all the content of our webpage. ... : contains all the general information related to our page. A simple starting head section contains this tags:

• : define the characters codification
• : adapt the view of our contents based on the screen of the device we use to see it.
• My Website: title of the webpage created and showed on top of the tab of our browser ... : contains all the content of our page. Here we can find the HTML code that use all the tags we have seen. In this case the body do not contains anything, thus a white page is showed. : HTML comments used to describe the code or add any notes by the programmer. Local location of the index.html file rendered with Chrome browser

Project example

• index.html

My CV John Doe Contact Information <br /> <br /> Profile <p>A dedicated and enthusiastic professional with experience in web development and project 

management. Passionate about learning new technologies and improving coding skills.

Work Experience Front-End Developer <p>ABC Company - January 2020 to Present</p> <p>Responsibilities:</p> Developed and maintained the front-end of the company’s website. Collaborated with designers to create user-friendly interfaces. Optimized web pages for maximum speed and scalability. Web Developer Intern <p>XYZ Agency - June 2019 to December 2019 </p> <p>Responsibilities:</p> Assisted in the development of client websites. Maintained and updated content on existing websites. Tested websites for cross-browser compatibility. 

• Curriculum: Project folder:

Let's visualize the page structure: index.html contact.html GitHub site External site example projects.html

CSS

CSS stands for CascadeStyleSheet and it is a markup language used to set the style of our HTML elements. In the early days of HTML, all the webpages had a very boring aestethics and due to the lack of customization, they look the same. With the introduction of HTML 3 in 1997 a lot of new tags where introduced to style a little bit the text with , , etc. Today all the tags and attributes introduced in these days are deprecated (they are no longer recommended). HTML should be used only for the content, and not for the styling. This was the thought of Håkon Wium Lie, the father of CSS. The CSS informations are stored insto a .css file, which have to be linked to the .html we want to customize. There are three ways of adding a CSS to our HTML:

• Inline: the styling information is specified using the attribute "style" inside the HTML tag. This attribute is available for all the HTML tags, both for the tags that need or do not need the closing tag, and its value follow the pattern __ where "property" specify which aspect we want to modify, while the "value" specify which styling we want to give. For example, if we want to select the background property of the tag:

This method is not recommended because in case of large projects, setting the style of each tag can be time consuming.

• Internal: the CSS is added following a different pattern, that is: selector { property:value; ... } where the selector define which HTML element will get the specified styling. All these infos go in between the tag
  For example, if we want to select the background property of the tag: index.html

style.css html { background:green; } The most difficult task in building a consistent CSS is to define the correct selector, that means: Who is the element we want to target with our styling?:

• Element selector: the selector match the name of an HTML tag. tag { property:value; ... } For example: index.html

 Red title <p> Red text paragraph </p> Green title Blue title 

style.css h { color:red; }

Before going on, we have to specify something else. Every HTML tag can have an attribute called "class", that is used to group one or more tags under the same class. Although their existing seems useless, they are fundamental with the CSS, because:

• Class selector: we can add a CSS styling based on the class specified. .class { property:value; ... } For example: index.html

 Red title <p> Red text paragraph </p> Green title Blue title 

style.css .red-text { color:red; } .green-text { color:green; } .blue-text { color:blue; } No matter the type of tag, the elements will get the corresponding CSS styling of the specified class.

For example: index.html

Drag me

Don't drag me

style.css p[draggable="true"] { color: red; }

• Universal selector: finally we can add a CSS styling to every HTML element. * { property:value; ... } For example: index.html

 Title <p> Paragraph </p> 

style.css

{ color: red; }

Let's explore the different properties:

Colors

The main color properties we can specify in a CSS are:

• background-color: to set the background color.
• color: to set the color of the text elements. Colors are identified with a unique RGB hex code, this because in color theory, we can obtain any color we want by mixing a certain amount of Red, Green and Blue. The hex color code is composed of "#" and then 6 digits of numbers and letters. During the years, more and more colors were added. Today we can refer to them also using a name insead of a color code. A good method to select the colors of our webpage is to follow the color theory to find the best matching colors. index.html

 Title <p> Paragraph </p> 

style.css

{ background-color: #ff7f50; color: white; }

Font

The main font properties we can specify in a CSS are:

• font-size: the dimension of the text. It can be specified in many different ways:
  • px: pixel, where 1px = 1/96 inches (or 0.26 millimiters).
  • pt: point, where 1pt = 1/72 inches (or 0.35 millimiters). This is the unit measurement used in Microsoft Word for example.
  • em: the text that use this unit will multiply the em value for the parent size (e.g. if the has a font-size:20px, and we have a tag inside the with font-size:1em; it means that the will have a font- size of 20 px, if we have 2em, will be 20 * 2 = 40px, and so on).
  • rem: same as em, but relative to the root (the tag).