I am working on a GitHub 'readme' page for my GitHub profile I have this gif that I want to be off to the right but not too far over that it is excluded. GitHub seems to not let me use the padding style so I don't know how to do this. Note I am not very experienced in HTML/CSS so I'm trying my best. The line in question is the <img/> tag line.
code currently;
# Hi there i'm Hudson or ZombieKicker7! 👋
<img align="right" alt="GIF" src="https://cdn.dribbble.com/users/1292677/screenshots/6139167/media/5387dc7e035b3efe9d94516044de66a4.gif" width="400" height="300" />
#### I'm currently:
results;
image
However, if I remove the align="right" style it will just go to its normal place in the code like so;
image
I hope this is enough information to explain the problem if not please ask and I would try to provide a better explanation.
GitHub does not let you use CSS or JavaScript in README files or other documents that it renders. That's because allowing arbitrary styling or scripting poses a bunch of different problems and READMEs are designed to be simple.
First, scripting and styling can modify other page elements and spoof parts of the page, in addition to other security problems, so GitHub doesn't allow this for security reasons. GitHub automatically sanitizes anything that's rendered using this type of HTML pipeline for this reason.
Second, allowing users to customize the appearance of items on the site with CSS can make the site hard to use or hard to read. For example, people could make text too small or with too low of a contrast for most people to read, which poses accessibility problems. GitHub wants people to have a good user experience and is required by law to be accessible.
So you may be able to use the align attribute here, but if it requires any sort of CSS, it won't be possible. You'll need to either stick with mostly plain Markdown or AsciiDoc or similar, or put the content you want somewhere else where CSS is allowed.
I've never used WordPress.org before. I'm wondering if I can convert this html website that I have to wordpress exactly the same?
https://reporting.pacificamerican.org/pas/
And if this website is a wordpress site, does it means that I don't have to go into the codes if I want to update my content? Because right now with html site it takes more time to update all the contents.
Thank you.
Yes, you can, but looking at the content I wouldn't say it looks like a great idea. Mostly because of how static the current content seems to be.
Pros:
It looks like you are about to add a blog-page. WordPress does make such re-occuring content easy.
It looks like you have repeated the menu on every page. (If you change the menu on one page, then you have to makes changes to all pages as well?). WordPress would help with that and let you use one menu everywhere. But there are also tons of easier methods to accomplish the same thing without WordPress. (For example <?php include 'menu.php';?> using PHP).
Cons:
The "multiple sub-pages in one page" that you are using doesn't play naturally with WordPress. Absolutely possible yes, perhaps not even difficult, but not out-of-the-box for sure.
The time it would take to edit pages would likely not change as drastic as you hope. I believe that the current content looks so static that anyone with a bit HTML/CSS knowledge would rather want to edit those static html files over having to click around in the WordPress admin interface.
The scroll-spy, editing tables and things like the yearly admissions does not come naturally either. I can think of a few dozen ways to solve such things with WordPress, but if you are going to do this work yourself, then the WordPress-conversion will take some effort and the results will not always be as pretty as you might imagine.
You'll definitely take a performance hit over using only static html. (But that is true for any CMS/framework)
My suggestion would be to first look at your current workflow. Perhaps look at an IDE that can upload with a click or on save, have history so you can back up when things break, and predefined snippets that make static content changes easy, (and of course code syntax highlighting!).
What tools are you using now?
Also remember that you are asking on a coding-site. Not many here would opt to use the WordPress editor over simply editing html-files. In fact, I dare to say many here carries a deep grudge after having to work around some specific quirks in the WP editor (aka tinyMCE).
Sure, you could replicate the layouts.
Sure, your content would be editable with just a form.
It would take a lot of effort, but certainly doable.
After a fair bit of looking around, the only way I've found to get a signature on gmail is to copy the rendered HTML signature. Two problems arose: 1) I couldn't actually select my entire signature, and I can't even see what I am selecting like how it works with regular text and other's tutorials for gmail signatures. 2) If I press Ctrl+A on Firefox (Chrome only copies half, even when I use Ctrl+A), I can manage to copy my signature, but if I try to paste in the signature box, it glitches out and appears static in the top left of that specific Chrome/Firefox tab, like this (edited for privacy reasons):
And if I try to just go for it and email (after saving changes), no signature will be rendered at all. Not too sure what to do at this point, so any suggestions are welcome.
Thanks.
EDIT: This is the HTML I use to render the signature. As a side note, I do replace those placeholder file names with links from an image hosting site. I also add 3 tags around a few of the ""s.
Ultimately I found the solution after playing with various HTML and image options. The problem lies in my use of the <div> tag for the layout of the signature. I should have been using <td>. Using the slice tool in Illustrator will render the HTML with <div> tags, while using ruler guides in Photoshop and saving for web (I used the legacy option) will render with <td> tags. I'm going to do a little more digging and see if using guides in Illustrator will still render with <div> tags, but I'm not sure if this site is the place to discuss this piece of the problem.
EDIT: By the way, Illustrator just really likes <div>s, so if anyone is looking to do this same thing, use Photoshop's legacy Save for Web mode. It will generate the <td> tags for you.
To start off with I can only use HTML and/or CSS. I do not have the capacity to use PHP or JavaScript?
I have researched an iFrame, but I'm not sure if it is possible to have a dropdown menu with an iFrame?
There's a very old-hat way of doing this called framesets, beware this is very old, doesn't look great and I'm not sure if it'll work well with dropdown menus e.t.c.
http://www.w3schools.com/tags/tag_frameset.asp has more on it.
Other than that the only thing I can think of is using PHP includes (which in you mentioned you don't have the capacity for) although I can go into detail about using PHP includes if need be.
Alternatively just repeating the menu code in each html page is the only other option as far as I know.
I personlally don't know a way which is just done with a HTML and CSS. But there is an easy way with PHP.
You make a file (nav.php) where you put your navigation stuff into it.
(Don't forget the php tags):
Now you can include the file in any HTML Document:
<?php include_once "filePath"; ?>
With just html&css, I only know copy&pasting. But with your wording, it sounds like you want just one menu like menu.html and linking it onto the multiple pages where you if you were to change the menu, you only need to change it in one section and don't need to copy and paste the rest. Since you want 1 single menu and link it to the multiple pages, I suggest the php way as Lorenz mentioned.
http://www.w3schools.com/php/php_includes.asp
...or another way I saw someone else do it is somewhere in this video by DevTips:
https://www.youtube.com/watch?v=nZoUA-98fL4
its something like {% filename %} but idk what lang. or whatever that's suppose to be. He just made his code look so much messier to me that I didn't bother looking into it.
I am managing a legacy website with a lot of static HTML websites, no server side scripting, just plain HTML/CSS, minimal javascript. I found it a huge waste of time to change the same piece of code numerous times in different pages. For example, when something in the menu changes, since the menu is just static text in each document, I have to make the same change numerous times.
I was wondering what the best tactic would be to minimize this overhead, in other words what would you recommend for managing things like navigation code across multiple static HTML pages.
I know you can use:
server side scripting (like PHP), but there is no other reason to use scripting at that particular site.
frames (but that's bad because its.. well, frames :))
server side includes (that seems like it could lead to trouble when changing the server)
javascript (bad for SEO)
What would you recommend?
Thanks.
Out of all the possibilities, both what you listed and anything else I know of, I'd still just run with a simple PHP-based solution. It's easy and clean, requiring next to no effort on your part. I do this with all the small sites I design.
Most often, you end up with fairly trivial structure. You write up a full page, then for each subsequent page you're just changing the bit in the middle where the content lives. In that case, just take everything above and below the content and save it in header.php and footer.php files, then put <?php require_once "header.php"; ?> at the top of each content file (and similarly with the footer file). Done!
This does have some minor disadvantages. For one, you're depending on scripting, but PHP is the most widely deployed server-side language in the world, so that's not really an issue. You don't even care if it's PHP4 or PHP5, since you're not doing anything fancy.
For two, you're running a script on every page load, in order to serve what is essentially a static file. That slows down your responses, and stresses the CPU unnecessarily. This probably doesn't matter much (the lag is very minor), but if you find it wasteful, there are some good PHP frameworks which will take your PHP-generated pages and generate static htmls out of them for you. (This is easy enough to do yourself, too, with just a bit of work using output buffering.) This way you get the best of both worlds - PHP templates (and the full PHP language if you end up wanting something fancier down the line) but static html pages for minimal CPU activity and fastest page load times.
You can use a static site generator. I recommend jekyll.
If you are set on maintaining a static site, I would recommend using a static site generator.
One I have used in the past is webgen
From the webgen page:
The page layout is separated from the
content: if you change the layout, all
pages that use that layout are
automatically updated. You can have
any number of different layouts and
even nested ones.
Write content in a markup language:
The content and layout files can be
written in a markup language like
Markdown, Textile or Haml which lets
you concentrate more on what you
write.
Automation: webgen can automatically
generate, for example, menus and
breadcrumb trails for you.
Dynamic content: It is easy to add
some dynamic content if there is a
need for it.
You could preprocess your website with PHP and then just upload the generated static HTML files.
It's been a long time since I've used it, but Dreamweaver was a great tool for working with static sites. It had a templating/repeating region mechanism that used comments for this purpose.
Edited to add: A little Googling jogged my memory. Dreamweaver has templates that are similar to ASP.NET master pages. For other content, it uses the metaphors of a Library and Assets. Since this is a static site, you should be able to pick up an older version of Dreamweaver on the cheap that meets your needs.
Edit 2: I have a soft spot for Dreamweaver. If StackOverflow is the anti-Experts Exchange than DW is the anti-FrontPage. Adobe being Adobe, at this point they've probably added enough features to effectively cripple it.
There may not be any other reason to use server side scripting, but certainly reducing the amount of written code is a pretty big reason to use it wouldn't you think? It would make maintaining the site much more efficient.
In general I'd recommend PHP - its handling for includes is exactly what you need, and it makes anything dynamic much, much easier to manage.
It is also extremely easy to find hosting with PHP installed.
You could use sed to batch-edit files containing the same page elements.
As everyone else has said, a static site generator is the way to go.
DocPad is new static site generator, built with Node.js and CoffeeScript it is able to support cutting edge markups like coffeescript, coffeekup, jade and stylus along with the usual markdown and haml support among others.
If you're completely new to the static site generator concept, and would like to know what templating engines and meta-data are, give this article a read.
What is the big problem with using PHP? In my opinion using an easy PHP include could save you a lot of time instead of editing numerous files. It makes sense.
<?php include('navigation.php'); ?>
Other than that the othe roption is making it on one and then copy and pasting it to the other pages.
I would use PHP whenever my clients would present me with websites of this sort. You can easily put all of the recurring HTML in one file and call it via functions, or put it in separate files and call it via includes/requires/what have you.
Best of all, if whomever you are maintaining the site for, wishes to have some way that they can add content themselves. You already would have enough of the necessary framework in place to make it very simple for them.
I've used Webby for this in the past and was very satisfied with how easy it made things and reduced duplication.
I'd say an inline frame can be just fine for something like a menu that appears on every page and needs to be updated on every single one. Just remove the frameborder, size it properly, and it should be good.
I would put all crawlable content into the HTML, then generate the repetitive content using javascript. So something like this:
<!doctype html>
<html>
<head>
<title>My website</title>
</head>
<body>
Main content goes here.
<!-- This script should generate the extra elements,
the navigation bar and stuff around the main div. -->
<script src="enhance.js"></script>
</body>
</html>
So all you need to do is setting the title and writing the main content in each page. The rest (which is probably not interesting to crawlers anyway) is generated by JS.
I think a reasonable compromise between ease and speed would encompass Server-Side-Includes first, then PHP later.
As for PHP, I'd suggest you wrap the content by using auto_append_file and auto_prepend_file directives for the Apache2 Module.
<?php include('header.php') ?>
//Your contents are placed here
<?php include('sidebar.php') ?>
<?php include('footer.php') ?>
you can include static webpages without using php but instead bu using javascript.
here is an example :
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>