Webpage practice [duplicate] - html

This question already has answers here:
Is there an HTML/CSS/JS editor that immediately shows changes? [closed]
(6 answers)
Closed 6 years ago.
I have been learning HTML + CSS via online courses like codeacademy and W3schools. I have a very simple grasp as to creating webpages and I want to play in a "sandbox" by creating pages and just messing with stuff.
I'm looking for somewhere I can type in my HTML and CSS and have it display on a webpage just like any other page I look at. I haven't been able to find anything quiet like that, other than the courses themselves. Is there even such a thing?

You could try JSFiddle
It accepts JS, HTML, CSS and renders it realtime...

You can download a coding software such as Brackets. Save your html file as index.html and your css as styles.css (per example) in the same folder.
Simply click on them in your computer's documents and it should work, opening in your default browser. You don't need an "online" tool for html/css.
Also check out this blog post for alternatives

I would highly recommend http://codepen.io. I find it the most user friendly of the bunch

I think JsFiddle would work for what you want. It also allows you to incorporate javascript as you begin to branch out. Plunker is also something I would recommend as it has a "live preview" where your page will automatically display as changes are made.

Get a free website from a site like 000webhost. Then, you can upload and edit code in real time on the server and view it on eg. http://example.freehost.com and you can view it real time. Also you could use software like notepad++ and edit your code before uploading it. Make sure your homepage is index.html

Related

How to implement/upload my own html and css code to weebly?

I made a custom website using html,css etc for a friend who is currently using a weebly platform template for their current website.
After agreeing to use my custom website, I have no clue on how to upload my pages to weebly and avoid using their templates. I've tried to clear the pages and then inputting my own html code and CSS, however, the CSS is not implemented and the html code itself is awkwardly placed. I have tried to google the problem, however, I cannot find any clear instructions or tutorials.
The only reason using I am weebly is because they are currently subscribed to it. So my question is how to use your own coded website with weebly?
Also if there are cheaper options of webhosting feel free to suggest them, since I'll need to use one for the future.
EDIT: I can run each page locally on my PC
Simple answer is, you can't. At least not the way you expect to be able to. Lots of platforms are like this.
That said, you can certainly convert what you've created to something that will work on the Weebly platform. Your Theme/Design, CSS and any custom JavaScript can be converted. The content itself is added using the Weebly editor.
I guess you should ask yourself; Who's going to be editing this website? And does the Weebly platform fit their needs. If it is your friend, and they already have a subscription, and the platform is sufficient for them, I would recommend converting it so it works with Weebly. ~And not create something that they can't manage later.

How can I add a table in a theme using Wordpress

I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.

Is there any possible way to give a <p> or a <h1> Tag. Something like a "src"? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I want to create Websites for small companies like restaurants. But i can imagine that i will often get called when they need help "Changing the text". Because they simply doesnt know better. Then i often will have do it for them. But there might be another way?
Image changing is simple. Just rename any Picture you want.
Like:
indexPicture.jpg
Everyone easily can replace those jpg. They simply rename any picture to indexPicture.jpg (preferable same size).
But when it comes changing to text. I can imagine a customer, that destroys html code. and removed some tags like (30 min work). Because he doesn't know better.
Can't I bind some text file to a <p> tag? So they simply have to open it and write something new.
Are there any better method?
Like a free App, they can open every website and simply drag and drop changes or select a <p> tag and simply rename it?
This isn't something that's really supported in basic HTML5, so the simple answer to a simple question is: no.
But life is never that simple in the modern web. If you're using a client-side templating framework like React or Angular (both are JavaScript frameworks which are freely available) you can code the pages to load fragments of text from disparate files which your client may have an easier time editing. I don't believe posting example code here is valuable to the question since that's basically a tutorial on how Angular or React work. There are great tutorials and examples on their sites.
As suggested in the comments the most accurate thing I can think of is to use a CMS. These are very helpful when changing the content of your site. Some examples are Wordpress, Drupal or Joomla. You can have a look here: https://www.ucl.ac.uk/building-great-websites/managing-your-website/using-a-cms
I hope that helps you!
You could try a shtml file instead? No CMS needed. I recently found out about this when creating my own HTML5 site as I wanted an easy way to edit a common footer rather than going through all the pages.
Just create a folder with the necessary files (Every paragraph maybe) and include it in the main file using a code like this:
<!--#include virtual="../filename.shtml" -->
I noticed that you didn't want to use a CMS such as WordPress, which as the comments suggest would be a really effective solution.
I once had an issue where I couldn't use a CMS cause I didn't have Cpanel access and what we essentially did was the follow.
Define a XML file, with clearly defined tags for each section of the
website that the client may want to change periodically.
Access the XML file through PHP(something like SimpleXML), and
display the tags/relevant content in the page.
Create a backend that allows the client to view/update content
through forms.
Alternatively, you may use a similar solution with databases and give forms for editing.

Where do I code html? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
So I recently finished the HTML and CSS course at Codecademy, and I want to practice coding with html and css. My problem though, is that I don't know where to start. I've been searching around to try and find the information I need, but I can't find anything. I kind of feel like it's so obvious noone's ever needed to ask, but I don't know, so here I am, asking.
While searching for the answer to this question, I could only find sites that teach how to use html and css, like Codecademy, and sites that let you test html code like w3schools.com, but no sites that let you practice html and CSS.
Here's my question:
Are HTML and CSS created as .html and .css files on my computer?
You should ask new question for each of the questions you posted.
Where do I code html?
You can use any text editor. Try Sublime Text - download the app for your operating system and install.
Create a new file, saving it with the file exetension .html. Be sure you saved the file in an easy to find location - like you would with any word processing document or spreadsheet.
Open a browser (Safari, Chrome, Firefox).
Click and drag your new HTML file into the tab window.
Make some changes in your HTML file.
Refresh your browser tab.
You're now on your way to learning more about coding HTML in your local environment.
You can create HTML, CSS and JS files on your hard drive and simply open up the HTML file by double-clicking it (or opening it directly through the browser's file menu).
Typically these files are stored on an HTTP server that provides content when asked... but for your purposes to practice HTML and CSS, you can simply save the files on your hard-drive and open them from there.
Yes, they are (but CSS can be stored on a server as well, see 2.). You can then open the HTML file you're editing in any browser and see the output.
You can include CSS in your HTML file by using:
<link rel="stylesheet" type="text/css" href="path-to-your.css">
The path to CSS file can also lead to an online server, if the CSS file is stored there:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simplest way I can think to answer is:
Are CSS and HTML coded in a file on one's computer?
Yes
If so, how is the CSS connected to the HTML, and how are these connected to a website?
In the HTML file you specify which CSS files will be used in your page (I'm assuming you know what CSS files are for). The web browsers like Internet Explorer, Firefox or Chrome, read the HTML code and produce the sites you see anywhere.
If you are only practicing basic HTML:
Open notepad (Windows+R, type "notepad", enter)
Write some code like the found here: http://www.w3schools.com/html/html_basic.asp
Save your file with .html extension
Open it in your web browser by just double clicking the file
EDIT. Check this other example to see how to reference the CSS files http://www.w3schools.com/html/html_css.asp.
You only need to put your HTML file and CSS file in a folder in your computer, you don't need go to any site to practice this because HTML and CSS code is interpreted directly by your web browser.
Are CSS and HTML coded in a file on one's computer?
yes and no.
Basically CSS can be anywhere; your computer, your server, someone else's server, etc.
Your Chrome blocks some local sources for security reasons, but Firefox handles them pretty well. If you have a static website (that does not involve with any database), you can just create a directory and make html, css, and javascript files and open with Firefox to test.
Otherwise, get hosting services like godaddy, or get a server like Amazon Web Services and put them in there.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
Typically, this is how people do.
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- your body... -->
</body>
</html>
If not, where are HTML and CSS coded for use on the web?
This was answered above.
CSS and HTML are not things that need to be installed on your computer, you just need to create a file with the .html extension, put some code in it and open it with a browser. The browser interprets it automatically, the same goes for CSS. To create HTML pages for practice, all you need to install is an IDE to edit your code.
Ok - everyone has to start somewhere and I'm going to assume you are a novice so if any of this information is too basic, please excuse it.
There are tiers to consider here....First let's break down what the languages do - I'm going to talk about additional languages because I see people already talking about servers and scripting to so I'm going to try and tie this all together for you. I started self taught and learned a lot of hard lessons so hopefully this add's a little bit of an advantage to the learning curve.
SERVER Think of a server as a computer. It run's slightly different software but the principles are the same. It's only job is to store code, interpret it and present it when called. A very popular server software that you'll find is apache so let's focus on this for now. Windows is not a server and can't be used as a server. However, it's possible to edit a server with windows and it's possible to run server software on top of windows just like any other application. You'll hear references to WAMP, LAMP, XAMPP and a bunch of other acronyms but for now you just need to know why they exist and what they do. A server is not required to write and produce html and css documents
HTML The primary purpose of HTML is to tell a web browser what it's looking at. You'll see a lot of HTML4 vs HTML5 and a ton of other arguments that won't make a lot of sense up front. The important thing to remember about HTML is that it is the framework for everything website related. A lot of people will argue that other languages are more important for one reason or another but without html, none of the other languages matter at all. Whatever you know about this is fine for now. Start small and work your way up.
CSS Is amazing. CSS3 is the current standard but there are still some things that are not cross browser compatible. That's a story for another day but the basics are the same everywhere. You define your classes, id's and elements then tell them how they're going to look. The more you get in to CSS the more you'll realize how amazing it really is. It's useful on a lot of levels and plays a big part in some scripting languages. The biggest thing to remember about CSS is that you should write as little as possible. The more rules you write, the more chance there is for overlapping and something you wrote 3 files ago on line 463 is going to dominate a new rule you just wrote. Try and write as much as possible in classes too so you can really make your code globally usable.
PHP/ASP These are just two of the more popular languages that are considered back end languages. When you're thinking of a website, break it down like this. Front end = Browser, Back end = server. Anything that PHP does is on the browser side. As an end user of a website, you'll rarely see it but it's a major component. This is relevant because as you grow, you'll wonder about trying your hand at a back end scripting language. That's great but that's when you're going to start getting in to servers and such so I'm sure you'll hear a lot about the benefits of it but for now, just stay focused on the basics until you're comfortable.
Javascript/jQuery Again, this is just two popular examples of the many scripting languages that are available on the client side(the browser). These languages can generally be viewed(and edited) by the end user. They are extremely useful for changing pages content without reloading the page and they can talk to the server languages as well. Again, get more comfortable first with your basics before branching out here but with the references you're bound to receive to these languages as you learn, it's helpful to know what they do and why.
Editor To edit html you can absolutely use any text editor. Word, notepad, notepad++, sublime-text, wordpad...literally anything that saves in a standard text format. As long as the extension is html, css, etc. The editors geared towards programming offer a lot of features and benefits as compared to the basic editors available in your windows/mac setup. Try your hand at a few different ones and see what suits your taste. You can write one file of html, download the programs and right click to open with each program to see the differences. Personally I recommend Notepad++ but to each his own.
Why is my answer so long? I know this is a majorly overkill answer to your question however I also know how hard it was for me to get started in this field without some very basic knowledge. This should be enough to get you off and running and hopefully help out when you encounter some unfamiliar territory. In the future, if you find yourself looking to get in to the server/scripting world, let me know and I'll pass along a write up I did on setting up xampp for windows.
Good luck!!
You need a text editor to practice your code I recommend downloading Sublime
Its free, in sublime under view you can change syntax which is the language you are programming in you can set it to html or css or any other language you desire.
The structure for "connecting" html and css is usually a simple folder like structure.
Create a folder called Website
In that folder you would have your html file(s) you can call it index.html
Also in that folder you would have sub folder(s) for your CSS and JS but since you are just working with CSS now create a folder named css. This is where you will save your css file that could be called something like style.css
Here is a more through guide on folder and directory structure.
Keep going with Codecademy and build your own projects in the browser.
I'd recommend taking a look at a good example. HTML5 Boilerplate is a good starting point and has some good practices for a project (in my opinoin). This may be a good reference for you to get a feeling of how the javascript and css files can be arranged and linked to. The website is static so you can open the index.html file with a browser to preview it. You can also make changes to the css and javascript files to see how this changes the index.html page.
https://html5boilerplate.com/
You're asking a very broad set of questions but hopefully there's quite a few good answers in here to point you in the right direction. Good luck!
It is technically possible to have both HTML and CSS in one file using the style tags:
<html>
<head>
<title>Title</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Test Text</h1>
</body>
</html>
However it is considered proper practice to use Cascading Style Sheets, which is probably what Code Academy used.
Checkout setting up a WAMP, LAMP, MAMP server depending on your platform (W) Windows, (M) Mac, (L) Linux.
http://www.wampserver.com/en/
https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation
https://www.mamp.info/en/
Then in your respective directory (html_public, Sites, wherever) you will have a local server environment where you can develop locally.
I use the Sites/ setup on a mac
css and javascript are usually linked in the head section of an html document.
You will need a editor - I recommend looking at Sublime Text or Atom.io
If you just want to play around for a while before attempting your own projects, you can build on sandboxes like http://codepen.io
Are CSS and HTML coded in a file on one's computer?
A: depends either you can create both css and html in one file or in different files. If you using lots of css code then everyone will suggest you to write them in different files and you can code them in someone's computer or on server.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
A: you said that you have done html and course and you don't know who to add a css file to a html file. (Use Google sometimes) use this link you Wil get you answer. After coding you can test them using your web development tool if you are developing in a tool. Else use your web browser to test.
I suggest you to visit websites as much as you can an use chrome tool to see how that website is done (you can only find front end parts.)

How do I make permanent changes to a website that doesn't belong to me? [duplicate]

This question already has answers here:
Modify permanently a CSS of a website that I do not own, and distribute the change to my network
(3 answers)
Closed 1 year ago.
My dad's company asked me to change the menu bar of their website. Basically, I just opened the page source (Ctrl + U) of the website, copied and pasted all the HTML and CSS to notepad++ and changed some of the HTML code (just to try it out and test it to see if it works) and saved it as an HTML file. But how do I permanently save the changes to the actual website so that everyone can see it? Sorry if this sounds like a noob question. My HTML skills are at beginner level.
It isn't possible to edit arbitrary websites. If it was, every major website would be covered in spam and pornography.
You have to have access to the server. The specifics depend on how the site is set up. There might be a content management system to edit it through, there might be a SFTP server you drop static files in, there might be any number of other approaches.
This desktop save isn't gonna work. You need access to the original files of the hosted website!
Like, if its a wordpress blog, you need to get access to its admin-panel
or if its a tailored website, you need to get its FTP access, then you can download that page, make changes and re-upload it on the same location - that's it!
Both require some credentials - for example if your website url is example.com, then it may be something like:
for wordpress: example.com/wp-admin/login.php
for site: ftp.example.com
The code you see on the browser are just built out of some raw data that are provided (sent) by the server for your browser. The browser engine makes its own version of source code from that data to be able to display the page to the end user. This code is most probably very different from the actual source code that the developers have written.
Also, You don't have the permission to change the website from your browser. You need to access to the server and make your changes from there.
Just like you can't make changes to a tv programme by changing the audio/video settings of your own television and you need to access to the devices in the studio to make real changes to it.