Tabla de contenidos para Web Design For Beginners 8th Edition en Web Design For Beginners

In this tutorial we’ll make an HTML5 layout for a simple webpage. While initially HTML may look confusing, there’s a relatively small amount of code that you'll need to remember. There are a few basic building blocks such as <div> which you will find yourself using regularly, then others such as <caption> which you will use much less often. If you have made pages before in the past usingHTML4 then you should feel at home, just be aware of the new tags. If you've not written any HTML before then good news, as it’s now easier to understand! HTML5 has added in a lot of new elements which help the browser interpret the layout of the page easier. <header> and <footer> are two examples, and describe common top and bottom…

An HTML page is made up of a series of tags that tell the web browser what to display and where. The main building block of a page is a div tag, short for division. If you look at a newspaper page, you will see that text is grouped together in columns. Images with captions are also together with a margin around them. A div in HTML is similar to this, and it’s usual to group together content in a similar way. While HTML5 has added a few new tags with more semantic names such as ‘header’ and ‘footer’, the main body of most pages is still constructed using divs. There is no limit on how many divs you have within a page and most webpages you visit online will…

When you’re designing a webpage, you have to remember that a browser window can be almost any shape and size. Desktop computers have a wide range of screen sizes, and mobile phone and tablets are used to browse the web too. Your nicely designed page could be ruined if you simply allow it to flow into the browser window, regardless of the latter’s size or shape. By creating a wrapper you can specify the width of the webpage content and its position in the browser window. It is an essential part of the design process. A ’wrapper’ is a commonly used name for apiece of CSS code that is used with a div tag to size and position the content of a webpage. A div tag is placed at the…

Website navigation is an important topic and it is something that you need to put some thought into as you are designing your website. At one time we would have used button images created in a paint or photo program and then used JavaScript to create a rollover effect when the mouse hovered over one. But that’s yesterday’s technology and modern sites use CSS instead. A CSS navigation bar looks like a regular unordered list in the HTML of the page, but using CSS we can manipulate the list elements and turn them into the website’s navigation. Instead of the list running down the page, the list elements can be displayed across it instead. We can style the links just like any other text and create a custom look for…

Having clean and clear header for your website can be the difference between a successful and user-friendly experience and a cluttered and disorganised website that no one will want to visit again. You don’t want a first time user coming to your site and not know how your navigation works, or your company branding and logo hidden under a load of useless graphics or text – it doesn’t even really matter how effective the rest of your layout is. Yes, this sort of thing has been known to happen(more often that web designers would like to admit), that is why so many designers are turning to a relatively new role called user experience or ‘UX’. In this tutorial we will take a look at how we can create a simple,…

In the past, the humble footer was not much more than a slim strip of colour with nothing more interesting than the copyright text written within. But in many modern websites, we have seen a huge improvement in footer designs and the content held within them. These days, they are a lot higher and contain allsorts of content, which can include contact forms, newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a newsletter sign-up field and generic About Us text, features another set of links for navigation, so our readers don’t have to scroll back to the top or to the sidebar if they want visit another page. As crazy as it sounds (and this would have sounded incredibly crazy no more than…

WordPress has become synonymous with the term blog, and with good reason. The web publishing platform is free to download, easy to install and simple to use. Add into this already appealing mix the fact that there are continual updates and development, swathes of themes and literally thousands and thousands of add-ons and it’s hard to see what’s not to like. WordPress itself comes in two distinct flavours:either hosted via www.wordpress.com or selfhosted via www.wordpress.org, as we explained earlier. In this tutorial we are focusing on the selfhosting option, which relates to users who already own a domain name and web space. The WordPress site extols the virtues of its famous 'five-minute installation’ and undoubtedly WordPress can be installed in five minutes, when you know what you are doing. However,…

WordPress is designed in such a way that creating a new post for your blog is as simple as typing it in. You won’t, however, always get your blog appearance or text just how you want it on your first try. What's more, if you’ve got a news-based site or content that's time sensitive, you might need to update a post with new information as it becomes available. You may even find you simply need to go back and correct a typo. Thankfully, this is not a challenging task. A WordPress blog is a dynamic site where nothing is ever fixed and final, and every word and image can be tweaked and adjusted until you are 100 per cent happy. In this tutorial we will guide you through the various…

One of the greatest things about WordPress is the way it takes care of things quickly and easily that would take an experienced designer/developer a while to achieve otherwise. It just makes things easy, and the Featured Image option is no exception. The basic idea behind the Featured Image function is that many bloggers, on their homepages, want to display an image that is associated with a post. However, implementing this has always been a bit tricky. Previously, users had to take advantage of custom fields, which would allow users to specify additional information relating to a post. In this case, that additional information is the location of a thumbnail image. So since the introduction of version 3.0, the user simply uploads a single image, designates it as a featured…

It is easy to type in a block of text, but it won’t look very exciting to your visitors and it will be hard to read. We have looked at breaking text up into paragraphs, alignment and so on, so now let’s move on to more exciting things like bullet points and numbered lists. A series of bullet points is a great way to emphasise features, functions, items and important things. Make them short and snappy and readers can quickly scan them to get the information they need. Numbered lists are useful too and you don’t even need to type in the numbers because WordPress does it for you. All you need to do is type the first one and click the toolbar button. You can then add as many…

When Google crawls your site it will use a number of indicators to assess its relevance and then index it according to its perceived value. The content of your website is one of the clearest signposts for Google to work out what keywords and phrases your website should be ranking for, so it is crucial to get this section of your SEO strategy right. What does Google consider to be good content? Recent Google updates have indicated that thin content pages with little or no relevant content are not likely to be ranked as highly as websites with more substantial, well-written content. Blog posts, interactive animations, videos and infographics are just some of the many ways in which you can engage your audience and drive traffic to your website. Written…

Sessions The best way to improve organic sessions is via rankings. If your site appears first in the SERPs, there is a likely CTR (click through rate) of around 33%. The importance of rankings is shown by analysing the CTR of a result in tenth position, which averages about 2%. There are many ways to increase a website’s ranking for any individual term. The most common – and arguably most effective – method is creating content and getting links with that search term in mind. Page load speed Page load times are now a significant factor in Google’s ranking algorithm. Use free tools like Google PageSpeed to identify where you need to spend the time. Once you have identified the pages with the problems and which elements need attention, you…

A Google Sitemap is important for a variety of reasons. Firstly, it tells Google how your site is structured and ensures that the search provider is aware of every page present on your site. This provides for new sites with lots of varied content, making sure they are properly structured in the Google mechanism, not to mention the site itself. As a result, the chances of search results coming your way are much more favourable. In fact, a sitemap is more important for new sites because Google is less likely to be aware of the extent of your website's content if you are yet to establish external links from other sites; this can spell a long road ahead towards gaining recognition from the biggest search provider of all. A sitemap…

Have you ever browsed the web and come across a website that has a really beautiful header? Do you wish you had something equally stunning sitting at the top of your website? Having a unique, memorable identity on the web can be the difference between a user remembering your site and the same user instantly forgetting it. The most important rule on the web is to ensure your site has great content that compels return visits, but, given the choice, most people would also like their site to look nice. Of course this can present a challenge, especially if you feel you’re lacking inspiration, artistic ability, or both. Fortunately, you don’t really need either! Some basic Photoshop techniques can be used to take a very simple concept and make it…

Who owns red? Who owns orange? Who owns purple? Reaching a stage where your brand is recognised through colour alone is a testament to how e_ective a marketing tool it is. But there’s more to colour selection than something that looks nice on packaging, TV adverts and magazines. Finding the right colour is not an easy task and is something of an art form for many brands – not to mention a major commitment. Let’s look at easyJet, which is a great example thanks to its easily recognisable branding. They arrived and turned the air travel industry upside down with their no-frills cheaper way to _y. It was a simplistic, bold move, and they needed a bold colour to convey their message of value and e_ciency – who else could…

ADOBE KULER Over the years, the designer’s sidekick, Kuler (pronounced ‘colour’), has gone from behemoth flash website to nimble HTML5 application, plugging directly into various Adobe desktop apps. A crowd-sourced platform for thousands of colour palettes searchable by phrase, it also provides a wide variety of options (or “Color Rule”) for creating your own unique palette. There may only be five colours to choose from at any one time, but you can explore the most popular palettes and find inspiration. The beauty of using the Kuler app is the variety and intensity of colour that it can provide. If you are on the lookout for a palette that will provide a winning collection of colours, this is undoubtedly a tool you need in your creative arsenal. What’s more, it gets…

Over the last few years a ‘less is more’ aesthetic has taken root in web design practice and presentation. At present, the use of text rather than images to create initial impact on a website is becoming more and more widespread. The old slide shows are being replaced with bold, stark fonts and plenty of white space. There has also been, however, the re-emergence of the font as an image in its own right. This technique is predominantly being used as an artistic element rather than a simple means to deliver language and communicate a specific textual message. For this reason, typography has become a far more creative endeavour in web design than it has been in many years. Here we will explore just one way of turning text into…

The web made its debut back in 1991,adding a graphical user interface to the internet. As such, web design was born. In its infancy, web design was heavily restricted by technology and hardware, with a web presence being little more than black text on a white background. Thankfully, technology and web design have reached a far more creative and imaginative stage in their evolutions. Skipping past frames, tables and animated GIFs, web design has become far more sophisticated and will continue to grow and develop. Look back a couple of years and take note of what was ‘on trend’ and how the underlying infrastructure helped shape a website. The progression of web design has always gone hand-in-hand with technology, and technology never takes a backward step, which in turn means…

While links may seem like a simple element to add to a webpage, they are the key building blocks of the entire internet. Imagine having to type a different address into the browser for every single page you wanted to visit on the web! Similar to pages within a book, separate webpages within a website help to break up content by topic or purpose. Then, by adding in a navigation bar or something similar to your site, it means that visitors will be able to quickly move to the content that they are interested in. Links are also one of the most important elements that Google and other search engines use to find and index your site. The kind of content that you link out to, and the kind of…

HTML and CSS essentially allow for a huge range of freedom when designing your pages, but there are a few layout principles that have developed over the years which it’s a good idea to follow. If you have a quick look at some of your favourite sites on the internet it’s quite likely that they will use a column layout, akin to a newspaper. A common layout for a site is to have the site or company logo at the top of the page, then have a column down the left for navigation or links, a main content section in the centre, and then a sidebar on the right with supplementary information or Facebook and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright information,…

Every webpage contains text and it is frequently the main content. You should therefore ensure that it looks good by choosing the fonts and styles to fit your design and the image you want to portray. There might only be a small amount of text if the main content focuses on images, but even so, there will be titles, links and captions. There's no getting away from text on webpages. You can add CSS code to a webpage to define how the text is displayed, but placing it in a separate .css file and linking to it in the page's head section means that the same text styles are applied everywhere in your site. HTML font tags have been replaced by CSS font-family definitions, old-fashioned <i> and <b> tags are…

A webpage would be pretty dull without any images on it. Some images may appear on every page, such as a graphical website logo or heading, while others may be specific to each page. You will need to create the images for your site before you start. Remember to use them sparingly and keep the file size as small as possible to ensure that your webpages load quickly. If you’re having trouble, we will go into further detail later in the book. Images are inserted into webpages using the HTML <img> tag, and there are attributes to position it left and right, set the size and so on, but those are dated. If you use CSS to format images instead, there are many more options available to you. For example,…

A sidebar is without doubt the area that is most often created by web designers because it’s the most needed. It can hold all sorts of content: things such as extra navigation links, a search field and perhaps some small thumbnail images that relate to your website – it can be anything. So in this tutorial we’re going to create a simple page layout that has a functional navigation and a nice and simple sidebar that includes some content within. We’re going to include within the sidebar a list of links for that extra navigation we mentioned and a search bar above and also some thumbnail images at the bottom to act as though we have a Flickr section – very useful for any photography based sites. So open up…

One of WordPress’s many strengths is its simplicity, and the Dashboard is an area where this simplicity truly shines. Offering everything you need right from the get-go, you can quickly get on with the actual work of editing and posting to your site without distraction. As well as a side panel that offers navigation, the Dashboard is made up of modules. These are small widgets that provide you with information from various portions of your site, such as comments and links. As with most elements of WordPress, the Dashboard is customisable so you can set it up exactly as you wish and position the most important elements within easy reach. “You can set your dashboard up exactly as you wish” Over the following nine steps we will show you how…

It almost goes without saying that good images are a crucial part of any blog – yours or anyone else’s. Even if your site is not particularly visually oriented, you’re not running a photography business for example, a well-chosen image displayed on the front page of the blog is second only to post titles in encouraging visitors to click through to read your content. Images can also be used to help pace the reader by breaking up longer posts, transforming large swathes of text into more digestible chunks. If you want to drive traffic onto your blog and keep it there, then you need to make it look good – textonly pages will drive people away, and that’s the last thing that you want to happen. Adding images to posts…

Creating posts in WordPress entails writing content that is interesting and engaging. This may be a daunting prospect but you’re not just limited to text. WordPress includes the facility to embed media within posts. This means you can place images, music, videos and more in a post to help bring your blog to life. Don’t worry if you don’t have any content of your own to begin with. You can embed content from other online sources. Think of it as creating a web link to something on another website. This linked content will then play from within your WordPress blog. You can embed content from services such as Vine, Tumblr and SoundCloud to name but a few. In earlier versions of WordPress embedding content was a more technical task. It…

SEO (search engine optimisation) is not a feature that you may be aware of when first setting up a new website, but understanding how it works can make the biggest difference of all to ensuring that you drive as much traffic to your site as possible. The quality of your website’s content must always be paramount, of course; but no matter how good the quality, you still need to make sure that your website stands out and competes against the millions of other sites that are also trying to attract the same visitors. There is no guaranteed way to ensure lots of traffic, but to not make use of SEO techniques is probably to ensure that your new site takes a long time to get off the ground, with the…

In addition to the recent trends in web design towards typo graphics, there has also been a shift in the use of images. As broadband speeds increase and web delivery methods refine, it’s no longer detrimental to the load-time of a website if it‘s heavy with large images. This enables imagery to be used as part of more interactive elements, such as navigation links. CSS now provides a wealth of possibilities to animate, embellish and enhance online imagery, and turn your images into interactive elements. In this tutorial, we will look at the process behind creating an image grid, complete with CSS hover effects and animated captions. It’ll be easy for you to animate your webpage, making it more beautiful and interactive. “There has also been a shift in the…

There are many ways in which you can sell items online. You could use eBay or Amazon Marketplace. You could sell direct to companies that buy specific items. Or you could go it alone and set up your own store via your personalised website. Maybe you want to be able to control the user experience or perhaps you have just one item for sale and want to centre an entire web offering around that specific product. Whatever you want to do, it is easy to create a shopping cart for your website. We will be using PayPal for this tutorial. PayPal is an accepted standard for online payment transactions and people are familiar with it. It means you have a solid name behind you and also the higher likelihood that…

Over the past few years the web has increasingly become a true social platform. Networks such as Facebook and YouTube now boast over a billion users each. For someone involved in creating a website, this is a terrific opportunity. Social networks democratise content sharing, so that if your website strikes a chord with users of these networks, the networks themselves become a effective promotion platform. There’s nothing to stop you from regularly posting a link to different pages on your website and encouraging your friends and followers to share your link, but this is really only scratching the surface of the power of social networks. Instead of relying on you to post, it can be far more effective to encourage visitors to your website to post to their wall or…

The purpose of design is to help convey information, whether it be descriptive or measurable. We often think of design as being about imagery and take the actual content for granted. Despite visual information being the first part of a website likely to be noticed, content is king and it is the textual information that delivers the main purpose for the website’s existence. With this in mind, we as website designers should always consider how the role of typography can be used to convey meanings through the appearance of text-based information. Before the emergence of CSS3, the only way to integrate fonts with visual effects would have been to use graphic images. This technique unnecessarily increases page-download size, makes the page less maintainable, difficult for search engines to read and…

The majority of webpages are made up of one or more files that are downloaded to a computer, which in turn are interpreted by a web browser and finally rendered out to screen. At its simplest, a web page is a plain text file that contains special instructions about what kind of content is contained within. These instructions are written in HTML – the language used on the world wide web. HTML, or HyperText Markup Language to give it the full name, is the core building block of a web page. HTML is a markup-based, human-readable language that’s designed to be simple to write, and easy to understand. A markup language is one where bits of data are literally marked as being of a particular type. So, for example, a…

Lists are an effective way of presenting important information in a way that’s quick and easy for your audience to read and digest. They are also a good method for giving a brief overview or introduction of the content to follow, helping your users find what it is they are looking for. Coding up a list in HTML is quick and very straightforward, and once you’ve got the hang of the basics you can start to apply your own styles using CSS to make them really stand out from the crowd, which we’ll come to later. There are two main types of lists in HTML: ordered and unordered. An ordered list starts at one and then increases. This is useful when you need to prioritise certain entries and give preference…

Cascading Style Sheets, commonly abbreviated to CSS, is a language used for describing how HTML should be presented. CSS documents provide all the format, colour, positioning and other characteristics of a design that you will see on virtually any webpage. Originally introduced alongside HTML4, the language was designed to separate the structure of a document from the presentation, improving the control of a design for web designers. CSS also helped to improve accessibility of web pages, reduce HTML code complexity and crucially the amount of repetition of markup that had to be created to describe how a page should look. As well as these benefits, the separation of form and function allows different designs to be displayed to users according to their device, simply by providing a different style sheet.…

Although some web pages may require a lot of text, it is generally best to keep it brief and to the point. People scan a page for interesting content and then move on if they don’t spot anything straight away. Lists are therefore very useful for drawing the visitor’s attention to some content and for presenting it in a way that can be digested quickly. The HTML <ol> and <ul> tags are used to create ordered (numbered) and unordered (bullet) lists. They are useful if unexciting, but with CSS list-style type you can change the bullet to different shapes like a circle or square. It is even possible to replace it with an image that's specially created to fit in with your site’s design and colour scheme using list-style-image. You…

Using HTML and CSS to create and style at wo-column website layout – one of the most common layouts – is surprisingly straightforward and very flexible. Almost all websites today use some kind of column layout with at least a sidebar and main content areas. So it’s one of the basic skills to have when designing websites, and once you understand these fundamentals you can move on to bigger and more elaborate designs. In this tutorial, we are going to open up our favourite text editor (we will be using Adobe Dreamweaver, but the humble NotePad or TextEdit is fine) and learn how we can shorten, lengthen and swap any column we need just by using CSS. Then we will discuss CSS floats, why we use percentages and a few…

Adding content to your website is either done dynamically using a content management system (CMS) or by hand. Either way, you are going to have to learn how it’s styled and what options you have. For instance, will you have just text or text with images? How about a video that’s either embedded using YouTube’s, or your own flash or HTML5 player? Of course your choices should be dependent on what niche your website caters for and thus knowing who will be visiting your website. So in this tutorial, we will add a few elements of content where one will include a video (which you can grab whatever video you want, you don’t have to use our one) and also some text and an image. So open up the index.html…

Datafields WordPress by default only provides basic content fields. But you may need more flexible data fields for radio buttons, image uploads, a data picker, a colour picker and so on. Child theme Ever wondered why custom work has been overwritten? Have you ever customised a WordPress theme, made modifications and then noticed that a new update has been released for the theme that you had been working on? Then did you later find that when you tried to update your theme, your website broke and lost all the changes? This is where the power of child theme comes into play. A child theme will preserve your changes separately, whilst maintaining the main parent theme updates. A child theme will also help make your theme future-proof. Previously you could easily…

Getting a WordPress blog up and running is much simpler than you might think Once you've completed the initial installation process, getting a post online takes a matter of minutes. The foundation of any blog is its posts, and getting these right is paramount to a successful, informative and compelling blog. So ensure you have carefully considered every detail before you get going. It is worth noting that the styling of a blog post is predetermined to a certain extent by the current theme. Nevertheless, the Posts window provides enough ammunition to ensure your posts are well presented and neatly styled. First things first: the title is perhaps the most important element of any blog post, so make sure it's relevant and appealing. Next is the text; again make this…

Track conversions Unlock the full potential of GA by going beyond tracking web stats. GA allows you to set up goals and events to measure how well you meet your objectives. Set up goals to track discrete actions such as form _lls and transactions or set up events to measure interactions that are independent of a page load – such as video plays or document downloads. “Backlinks are a key ranking factor in Google’s ranking algorithm, and although the level of their importance has decreased slightly over recent years, evaluating them is a key part of SEO” Understanding the metrics behind your website is fundamental to being able to affect how the search engines rank your site. You can use Google Analytics to help inform you on how your current…

No matter how much e_ ort you put in to a website or how great your content is, you need to understand what your audience is looking at and what they are interested in to keep growing your site. You can use web services that claim to understand your tra_ c, but by far the most recognised service is Google Analytics. It can show you, in great detail, which parts of your site are successful and which parts require extra e_ ort to receive attention from the masses. You can monitor all aspects of your site, from social networking impact to the number of people visiting on mobile devices, and more general statistics including visitor numbers and when they visit. The basic Google Analytics service is free and includes all…

Background images are an essential part of designing a website, so being able to create a tiled image – one that repeats without seams – is especially important. After all you don’t know how long your pages will be. We can find inspiration all around us for repeat patterns, whether it’s a bee’s honeycomb, parquet flooring or some vintage wallpaper. While it’s true to say that styles and fashions come and go, often at an alarming rate, there are those that are always fashionable – timeless designs that work whatever the era. ‘Vintage’ suggests age, refinement, sophistication and experience. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop. We’ll start from a sketch and work this up into a fantastic vintage wallpaper tile, which will repeat perfectly…

RED OR DEAD Red is one of the hardest colours to work with, but can also be one of the most memorable when done correctly. Coca-Cola are a testament to that. Think carefully before selecting red for your designs though, and consider speci_cally what type of red. Try it out on several types of screen. It’s not the easiest colour to work with in print, nor read from, but if done well it can create a look of high energy and excitement. PRIMARY’S COOL... When handled with care and consideration, the vibrancy of the primary colours – red, blue and yellow – can create an impactful and powerful look. Think Google and ebay for great examples of where this has worked well. The bright, contrasting colours mean everything else has…

Navigation menus are vital to the success of any website. The navigation menu on a website is like a road sign on a street or a level directory in a shopping centre. You can’t decide on your destination without knowing all of the options available to you, and reaching that destination would be impossible without _rst knowing where you are. Just like in real life, navigation in web design is very important and plays a major role in a website’s usability, as well as in the user experience. Nowadays you can see plenty of di_erent types of navigation menus with interesting, creative and unusual designs. In this tutorial, we will look at how we can develop a simple and clean navigation menu. The menu will expand horizontally and, when closed,…

The problem with descriptive language is that the addition or omission of a single word, or even a comma, can give a completely different meaning to the message being communicated. Creative design can use this flaw in language to emphasise the difference between one meaning and another. In our example, we use the text ‘I am not invincible’ with animation to emphasise the omission of ‘not’, thereby changing the meaning of the sentence. This effect has been used to good advantage on the McClaren agency website to emphasise the agency’s excellence. This tutorial shows how standard CSS without support from JavaScript can be used to redefine the standard <strike> tag to present an animated strikethrough effect. The advantage of this approach is how it can be applied to websites containing…

In order to promote your website or the subject of your website, you may consider producing an email newsletter. These are sent out to subscribers, keeping them up-to-date with the latest additions to your webpages. The idea is that it keeps driving tra_ c back to the site among those who have already expressed an interest in it, allowing you to show them that you are still up and running and that there's plenty of content to keep visitors coming back for more. In order to be e_ ective, you will want to add a newsletter script to your webpage. This will produce a form into which people can insert their contact information and sign up for your regular updates. This is a great way to capture marketing data for…

Twitter is a great way to engage with your visitors, and can help to drive traffic to your website. An ideal way to encourage visitors to tweet a link to your pages is to include a tweet button in your design, but a shortened link isn’t the most eye-catching, attention grabbing advert for your website. Fortunately, there is a way you can enhance tweets that link to your website, whether it’s you sending the tweet or one of your visitors. This is done with the help of Twitter cards. What are Twitter cards? Twitter cards make it possible for you to attach additional information to tweets when your website is linked within a tweet. These cards can take a few different forms, and will show up slightly differently according to…

Above the fold Anything that resides in the web browser window when your webpage first loads is referred to as above the fold. Imagine it as a large newspaper – above the fold is the top part with the name of the paper. Accessibility This is the extent to which a website can be used by people with a disability. Ideally, a website will be accessible for people with visual and hearing problems and those who are colour blind or physically disabled. Address bar Also referred to as the URL bar. This is where you type in the web address in a browser. AJAX Standing for asynchronous JavaScript and XML, AJAX is a group of technologies which include HTML, CSS and JavaScript. It allows data from a web server to…